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，但是我无法使max-width起作用。而且我不知道如何确定最后一个单元是确定其他单元格大小的单元。

product-info的内容可能很大，而我用省略号将其变得太大。

Answer 1

要做的第一件事是摆脱table-layout: fixed，因为这与您想要的相反。对于其他情况，如果您想使表格灵活，请不要尝试在表格上施加宽度！

有一个小技巧可以使某些表单元格的宽度与它们的内容一样宽，同时为剩余的单元格提供剩余的剩余空间：设置其宽度1px并通过设置{确保它们不能环绕{1}}。然后其余的自然就会来。

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

希望这就是您的意思！

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

1 个答案: