html - 根据单元格大小的灵活表格

Question

我有这样的表格:

   ------------------------------------------------
  |   product-name                   | icon | text |
   ------------------------------------------------
  |   product-info                   | icon | text |
   ------------------------------------------------

我希望我的单元格能够根据最后一个单元格内容灵活调整:

   ------------------------------------------------
  |   product-name                      | ic | smt |
   ------------------------------------------------
  |   product-info                      | ic | smt |
   ------------------------------------------------

   -------------------------------------------------
  |   product-name                | icon | big-text |
   -------------------------------------------------
  |   product-info, bla bla bla...| icon | text     |
   -------------------------------------------------

我试过这个 css:

  table {
    table-layout: fixed;
    font-size: 12px;
    width: 100%;
  }

  table td:nth-child(1) {
    max-width: 70%;
  }

  table td:nth-child(2) {
    width: 10%;
  }

  table td:nth-child(3) {
    max-width: 20%;
  }

我放置了 table-layout:fixed，但我无法使最大宽度起作用。而且我不知道如何判断最后一个单元格是确定其他单元格大小的单元格。

product-info 内容可能非常大，我应用了一个省略号，它变得太大了。

Answer 1

首先要做的是摆脱 table-layout: fixed，因为这与您想要的相反。对于其他方面，如果您希望表格灵活，请不要试图强加它们的宽度!

有一个小技巧可以让一些表格单元格与其内容一样宽，同时为其余单元格提供剩余空间的其余部分:使它们的宽度为 1px 并确保它们不能换行通过设置 white-space: nowrap。剩下的就自然而然了。

table {
  border: 1px outset;
  width: 100%;
}

th, td {
  border: 1px inset;
}

table td:nth-child(2),
table td:nth-child(3) {
  white-space:nowrap;
  width: 1px;
}

<table>
  <tr>
    <td>product-name</td>
    <td>ic</td>
    <td>smt</td>
  </tr>
  <tr>
    <td>product-info</td>
    <td>ic</td>
    <td>smt</td>
  </tr>
</table>
<br>
<table>
  <tr>
    <td>product-name</td>
    <td>icon</td>
    <td>big-text</td>
  </tr>
  <tr>
    <td>product-info, bla bla bla...</td>
    <td>ic</td>
    <td>smt</td>
  </tr>
</table>

希望这就是你的意思!