Question

当前

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

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

第1列=最小宽度为600px
第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）宽度没有调整。

预期行为：

当窗口大小为600px时，第1列的宽度= 600px，第2列和第3列的最小自动尺寸。可选：带有水平滚动条。
当窗口大小较大时，例如1000px +，第1到3列会自动调整大小，第1列的宽度> 600px。

注意：

如果可能的话，我希望保持表格和div的结构相同。
这是基于我的上一个查询：CSS: center textarea inside <td> for 100% table

Answer 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>

CSS：调整父表列的列宽以包含子div，其他列使用自动宽度

1 个答案: