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

Question

目前

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

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

第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列的最小宽度为600px，但（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，使其在响应/移动模式下工作。请检查希望这将解决您的问题。我也建议按照标准在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>

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1