HTML 表格单元格宽度答案

【问题标题】：HTML table cells widthHTML 表格单元格宽度
【发布时间】：2025-07-08 15:00:01
【问题描述】：

我正在尝试在 HTML 中实现以下表格布局

100% 宽度的表格包含三列。左右栏内容相应地左右浮动。左列和右列应按其最宽的子项分配最小的可用空间，其中中间列分配剩余空间。如何用 HTML5 和 CSS 定义这样的表格？

【问题讨论】：

【解决方案1】：

table {
    border-collapse: collapse;
}

table tr:nth-child(even) {
  background: #af3;
}

table th, 
table td {
    border: 1px solid gray;
    text-align: center;
    border-collapse: collapse;
}

table tr td:first-of-type,
table tr th:first-of-type,
table tr td:first-of-type,
table tr th:last-of-type  {
    width: 100px;
}

<table style="width: 100%">
					<tr>
						<th>Element</th>
						<th>Element</th>
						<th>Element</th>
					</tr>
					<tr>
						<td>Element</td>
						<td>Element</td>
						<td>Element</td>
					</tr>
					<tr>
						<td>Element</td>
						<td>Element</td>
						<td>Element</td>
					</tr>
					<tr>
						<td>Element</td>
						<td>Element</td>
						<td>Element</td>
					</tr>
					<tr>
						<td>Element</td>
						<td>Element</td>
						<td>Element</td>
					</tr>
				</table>

【讨论】：

【解决方案2】：

试试这个。

<div class="cont">
  <div class="left">left</div>
  <div class="middle">middle</div>
  <div class="right">right</div>
</div>

.cont {
  display: flex;
  flex-direction: row;
  color: #fff;
}

.left {
  flex: none;
  background: #111;
}

.right {
  flex: none;
  background: #111;
}

.middle {
  flex: auto;
  background: #66ccff;
}

【讨论】：

【解决方案3】：

有一个 w3school 教程 tutorial 关于如何做与您正在尝试做的事情非常相似的事情，我对其进行了改编并用它制作了一个代码笔 Codepen。

<div class="row">
  <div id="leftclm" class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div id="rightclm" class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>



    * {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 60%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}
#rightclm{
  width: 20%;
}
#leftclm{
  width: 20%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

【讨论】：