为什么 td 元素上的宽度不能与表格布局一起使用？答案

【问题标题】：Why is width on td element not working with table-layout fixed?为什么 td 元素上的宽度不能与表格布局一起使用？
【发布时间】：2017-03-18 00:51:24
【问题描述】：

我已经阅读了很多关于这个的帖子，例如TD column width value not working with fixed table-layout td widths, not working? 等等。但是当我给 td 宽度时，它仍然没有得到那个宽度。这是该问题的一个工作示例：

div {
  width: 400px;
  padding: 5px;
  border: 1px solid red;
}
table {
  table-layout: fixed;
  width: 100%;
  border: 1px dotted green;
}
td {
  word-break: break-all;
}
td:nth-of-type(1) {
  width: 50px;
}
td:nth-of-type(2) {
  width: 150px;
}

<div style="width: 400px;">
  <table style="table-layout: fixed; width: 100%;">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd">
        <td class="">
          <a href="#">The_first_line</a>
        </td>
        <td class="">
          <a href="#">The_second_but_a_long_line_with_so_many_characters</a>
        </td>
        <td class="">
          <ul class="">
            <li class=""><a href="#" rel="tag" title="" class="">The simple</a>
            </li>
          </ul>
        </td>
        <td>
          <a href="#">last</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

第一个 td 应该占用 50px，第二个应该占用 150px，但这并没有发生。为什么？

【问题讨论】：

如何在 2nd td 上使用内联 css 看看它是否有效
也可以使用colspan实现

标签： html css html4

【解决方案1】：

您的伪 :second-of-type 无效。尝试 :nth-of-type() 代替：

td:nth-of-type(2) {
  width: 150px;
}

但是，这不是一种非常可靠的定位元素的方法。如果您的页面上有多个表格怎么办。向表中添加一个类可能是个好主意：

<table class="my-table">

然后针对该表指定目标：

.my-table td:nth-of-type(2) { .. }

【讨论】：

【解决方案2】：

没有像second-of-type 这样的选择器，您可以使用nth-child(2) 代替。并且您应该在使用 thead 时将样式应用于 th 以下解决方案可为您提供所需的结果

div {
  width: 400px;
  padding: 5px;
  border: 1px solid red;
}
table {
  table-layout: fixed;
  width: 100%;
  border: 1px dotted green;
}
td {
  word-break: break-all;
}
th:first-of-type {
  width: 50px;
}
th:nth-child(2) {
  width: 150px;
}

<div style="width: 400px;">
  <table style="table-layout: fixed; width: 100%;">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd">
        <td class="">
          <a href="#">The_first_line</a>
        </td>
        <td class="">
          <a href="#">The_second_but_a_long_line_with_so_many_characters</a>
        </td>
        <td class="">
          <ul class="">
            <li class=""><a href="#" rel="tag" title="" class="">The simple</a>
            </li>
          </ul>
        </td>
        <td>
          <a href="#">last</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

但是为什么我们必须改变th的宽度呢？我只需要更改td的宽度？

【解决方案3】：

尝试像这样固定 th 而不是 td 的宽度：Demo

tr th:first-child {
  width: 50px;
}

tr th:nth-child(2) {
  width: 150px;
}

【讨论】：

但是为什么我们必须改变th的宽度呢？我只需要更改td 的宽度。

【解决方案4】：

您只是在 td 元素上设置宽度，th 导致了问题。设置两者的宽度，它将起作用：

td:nth-of-type(1) {
  width: 50px;
}
th:nth-of-type(1) {
  width: 50px;
}
tdnth-of-type(2) {
  width: 150px;
}
th:nth-of-type(2) {
  width: 150px;
}

示例： https://www.w3schools.com/code/tryit.asp?filename=FEAXCBFALXN2

【讨论】：