Question

我已经阅读了很多关于此的帖子，例如： 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，但这不会发生。为什么呢？

Answer 1

您的伪：第二类型无效。尝试：nth-of-type（）代替：

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

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

<table class="my-table">

然后针对该表特定目标：

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

尝试修正宽度而不是像这样的td： Demo

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

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

Answer 4

您只需在td元素上设置宽度，这会导致问题。在两者上设置宽度，它将起作用：

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

为什么td元素上的宽度不能与表格布局固定？

4 个答案: