CSS：调整父表列列宽以包含子 div，附加列使用自动宽度答案

【问题标题】：CSS: adjust parent table column column width to contain child div, with additional columns using auto-widthCSS：调整父表列列宽以包含子 div，附加列使用自动宽度
【发布时间】：2019-04-22 04:52:08
【问题描述】：

目前

我有一个 100% 宽度的表格，其中包含 3 列，其中有一个文本区域，用户可以在其中输入文本。

我的目标是具有以下列宽行为：

第 1 列 = 最小宽度为 600 像素
第 2 列 = 相对于其他列的自动宽度
第 3 列 = 相对于其他列的自动宽度

额外目标：如果屏幕宽度小到无法完全显示 1 列或更多列，请添加水平滚动条。

代码：

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid black;
  table-layout: fixed;
}

th, td {
  text-align: center;
  border: 1px solid black;
  padding: 10px;
}

.container {
  border: 1px solid blue;
  
}

.text-area {
  width: 100%;
  box-sizing: border-box;
  display: flex;
}

.fixed-min {
  min-width: 600px;
}

<!DOCTYPE html>
<html>
<body>
	<table>
		<tbody>
			<tr>
				<th>Column 1 - has min width</th>
				<th>Column 2</th>
				<th>Column 3</th>
			</tr>
			<tr>
				<td>
          <div class="container fixed-min">
            <textarea class="text-area">Respect the minimum column width for this column.
            </textarea> 
          </div>
        </td>
				<td>
          <div class="container">
            <textarea class="text-area">This column width should revert to default for the table.
            </textarea>
          </div>
        </td>
				<td>
          <div class="container">
            <textarea class="text-area">This column width should also revert to the default for the table.
            </textarea>
          </div>
        </td>
			</tr>
		</tbody>
	</table>
</body>
</html>

https://jsfiddle.net/bjLxuvfz/1/

问题

第 1 列的最小宽度为 600 像素有效，但 (1) 类“容器”和 (2) 宽度未调整。

预期行为：

当窗口大小为 600 像素时，第 1 列宽度 = 600 像素，第 2 列和第 3 列处于最小自动大小。可选：带有水平滚动条。
当窗口大小很大时，例如1000 像素以上，第 1 列到第 3 列自动调整大小，第 1 列宽度 > 600 像素。

注意：

如果可以达到预期结果，我希望保持表格和 div 的结构相同。
这是基于我上次的查询：CSS: center textarea inside <td> for 100% table

【问题讨论】：

标签： html css

【解决方案1】：

我已经根据要求进行了更改，为了实现这一点，请删除 table-layout:fixed 并将外部 div 添加到 table 以使其在响应/移动模式下工作。请检查希望这能解决您的问题。我也建议按照标准在头上制作。

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid black;
  
}

th, td {
  text-align: center;
  border: 1px solid black;
  padding: 10px;
}

.container {
  border: 1px solid blue;
  
}

.text-area {
  width: 100%;
  box-sizing: border-box;
  display: flex;
}

.fixed-min {
  min-width: 600px;
}
.res-table{
  max-width:100%;
  width: 100%;
  overflow-x: auto;
}

<!DOCTYPE html>
<html>
<body>
 <div class="res-table">
	<table>
		<tbody>
			<tr>
				<th width="600px">Column 1 - has min width</th>
				<th>Column 2</th>
				<th>Column 3</th>
			</tr>
			<tr>
				<td>
          <div class="container fixed-min">
            <textarea class="text-area">Respect the minimum column width for this column.
            </textarea> 
          </div>
        </td>
				<td>
          <div class="container">
            <textarea class="text-area">This column width should revert to default for the table.
            </textarea>
          </div>
        </td>
				<td>
          <div class="container">
            <textarea class="text-area">This column width should also revert to the default for the table.
            </textarea>
          </div>
        </td>
			</tr>
		</tbody>
	</table>
</div>
</body>
</html>

【讨论】：