根据单元格大小灵活 table

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，因为这与您想要的相反。至于其他方面，如果您希望 table 灵活，请不要强加宽度！

有一个小技巧可以使一些 table 单元格与其内容一样宽，同时将其余单元格的其余部分设置为 space：使它们的宽度为 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>

希望这就是你的意思！

根据单元格大小灵活 table

Flexible table according to a cell size

html

css

cell

css-tables