HTML表格单元格的宽度

Question

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

100％宽度的表具有三列。左右列的内容将相应地左右浮动。左列和右列应按其最宽的子项分配最小的可用空间，而中间列则应分配剩余的空间。如何使用HTML5和CSS定义这样的表？

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

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

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