html - 最大宽度不适用于表格单元格

Question

我有一个表格，每行有 3 个单元格。这是我的 CSS:

table.result {
  width: 100%;
}

.result td:nth-child(3n+1) {
  width: 10%;
  max-width: 50px;
}

.result td:nth-child(3n+2) {
  width: 33%;
  max-width: 150px;
}

表格的第一个单元格宽度为 10% (187px)，第二个 td 为 33% ( 618px)并且设置 max-width 不起作用。

这个想法是有一个 100% 宽度的表格，第三个单元格具有其余宽度

table.result {
  width: 100%;
}

.result td:nth-child(3n+1) {
  width: 10%;
  max-width: 50px;
}

.result td:nth-child(3n+2) {
  width: 33%;
  max-width: 150px;
}

<table class="result" border="1">
  <tr>
    <td>Row</td>
    <td>Name</td>
    <td>Description</td>
  </tr>
</table>

Answer 1

通过向每个单元格添加一个 div 并在这些单元格上使用 max/min-width，您可以更好地控制单元格，这是一个示例

table.result {
  width: 100%;
}

.result td:nth-child(3) {
  width: 100%;
}

.result td:nth-child(1) div {
  min-width: 40px;
  max-width: 50px;
}

.result td:nth-child(2) div {
  min-width: 100px;
  max-width: 150px;
}

<table class="result" border="1">
  <tr>
    <td>
      <div>
        Row
      </div>
    </td>
    <td>
      <div>
        Name
      </div>
    </td>
    <td>Description</td>
  </tr>
</table>

---

另一种选择是使用 Flexbox，它可能看起来像这样

.result {
  display: flex;
  flex-direction: column;
}

.result > div {
  display: flex;
}

.result > div > div {
  border: 1px solid gray;
}

.result > div > div:nth-child(1) {
  flex-basis: 40px;                  /*  40px width  */
  max-width: 50px;
}

.result > div > div:nth-child(2) {
  flex-basis: 100px;                 /*  100px width  */
  max-width: 150px;
}

.result > div > div:nth-child(3) {
  flex-grow: 1;                      /*  fill the rest of the space  */
}

<div class="result">
  <div>
    <div>
      Row
    </div>
    <div>
      Name
    </div>
    <div>
      Description
    </div>
  </div>
</div>