Question

我有一个设置为100％宽度的表，其列我想获取定义的宽度。但是，我的所有列似乎都有相同的宽度。

.table {
  table-layout: fixed;
  width: 100%;
}

.table th[colspan=4] {
  /* width: 100%; */
}

.table td,
th {
  border: 1px solid #AAA;
  text-align: center;
}

.table td.one {
  width: 10%;
}

.table td.two {
  width: 20%;
}

.table td.three {
  width: 50%;
}

.table td.four {
  width: 20%;
}

<table class="table">
  <tbody>
    <tr>
      <th colspan="4">All Four</th>
    </tr>
    <tr>
      <th colspan="4">All Four</th>
    </tr>
    <tr>
      <td class="one">A</td>
      <td class="two">B</td>
      <td class="three">C</td>
      <td class="four">D</td>
    </tr>
  </tbody>
</table>

如果我删除了表格中的width属性，它会尊重各个列的宽度。如果我将布局更改为table-layout: auto，那么它也可以。但是，如果我有一行跨越多列作为第一行，我就无法将宽度变为我想要的宽度。

Answer 1

说实话，我不能确切地告诉你“为什么”。但是，如果您将width: 100%;更改为min-width: 100%，则会获得所需的结果。我想这是因为如果将宽度设置为100％，则无法计算每列的总宽度。

.table {
  table-layout: fixed;
  min-width: 100%;
}

.table th[colspan=4] {
  /* width: 100%; */
}

.table td,
th {
  border: 1px solid #AAA;
  text-align: center;
}

.table td.one {
  width: 10%;
}

.table td.two {
  width: 20%;
}

.table td.three {
  width: 50%;
}

.table td.four {
  width: 20%;
}

<table class="table">
  <tbody>
    <tr>
      <th colspan="4">All Four</th>
    </tr>
    <tr>
      <th colspan="4">All Four</th>
    </tr>
    <tr>
      <td class="one">A</td>
      <td class="two">B</td>
      <td class="three">C</td>
      <td class="four">D</td>
    </tr>
  </tbody>
</table>

Answer 2

如果删除表格中的width属性，它会尊重个人列宽。如果我将布局更改为table-layout：auto，那么也是有用。但我无法让宽度成为我想要的宽度如果我有一行跨越多列作为第一行

这就是table-layout: fixed的工作原理。

从这里开始：https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

表和列宽度由table和col的宽度设置元素或第一行单元格的宽度。细胞在后续行不会影响列宽。

从这里开始：https://www.w3.org/TR/CSS21/tables.html#fixed-table-layout

以这种方式，用户代理可以开始布置表格已收到整个第一行。后续行中的单元格不会影响列宽。

所以，实际上：

如果您将布局更改为auto，它将使用自动表格布局，并且您的列宽优先于内容大小。
如果删除表上的width属性，则它将停止使用固定表格布局，并且与auto一样好。

另一个答案有效，因为删除了width属性（正如您在问题中提到的那样）。如果您参考上面链接的规范，它会说：

可以使用'width'明确指定表格的宽度属性。值为'auto'（对于'display：table'和'display'： inline-table'）表示使用自动表格布局算法。

<强>解决方案：

您的问题的解决方案是以某种方式让表格布局忽略第一行。这是由colgroup / col元素完成的。删除定义td宽度的类，并在cols上指定。{/ p>

<强>段：

.table { table-layout: fixed; width: 100%; }
.table td, th {
  border: 1px solid #aaa; 
  text-align: center; padding: 4px;
}
.table col.one { width: 10%; }
.table col.two { width: 20%; }
.table col.three { width: 50%; }
.table col.four { width: 20%; }

<table class="table">
	<colgroup>
		<col class="one"/>
		<col class="two"/>
		<col class="three"/>
		<col class="four"/>
	</colgroup>
  <tbody>
    <tr><th colspan="4">All Four</th></tr>
    <tr><th colspan="4">All Four</th></tr>
    <tr>
      <td >A</td>
      <td >B</td>
      <td >C</td>
      <td >D</td>
    </tr>
  </tbody>
</table>

具有固定布局100％宽度的表不能具有不相等的列宽

2 个答案: