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）并设置为{{ 1}}不起作用。

我们的想法是拥有100％宽度的表格，第三个单元格具有剩余宽度

＆＃13;

max-width

＆＃13;

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

＆＃13;

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>

Answer 2

您可以尝试使用Flex调整每个表格元素的宽度。您可以在这里找到更多信息： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

max-width不适用于表格单元格

2 个答案: