目前
我有一个 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
最佳答案
我已经根据要求做了修改，为了实现这个删除 table-layout:fixed 并添加一个外部 div 到 table 来制作它在响应/移动模式下工作。请检查希望这将解决您的问题。我还建议按照标准在 thead 中制作。
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>关于html - CSS:调整父表列的列宽以包含子 div，附加列使用自动宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55789275/