Question

我想构建一个table，它有四列：两列有文本，两列是空的。我希望空的那些尽可能地扩展，而那些带有文本的那些要紧。

以下代码段显示了这样一个表格：列的宽度可能会根据内部文字的大小加权。

table,
td {
  border: solid;
  border-collapse: collapse;
}

<table style="width: 100%">
  <tr>
    <td>This is some text</td>
    <td>And some more</td>
    <td></td>
    <td></td>
  </tr>
</table>

可以做些什么来把它变成像

这样的表格

哪个文本会被单元格紧紧包围，而空文本会被展开？

Answer 1

如果flexbox是一个选项，您可以这样做：

将display: flex提供给tr
将flex: 1提供给两个空的。

见下面的演示：

table,
td {
  border: solid;
  border-collapse: collapse;
}
table tr {
  display: flex;
}
td:nth-last-child(1),
td:nth-last-child(2) {
  flex: 1;
}

<body>
  <table style="width: 100%">
    <tr>
      <td>This is some text. This is some text</td>
      <td>And some more</td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>

Answer 2

如果您知道文本永远不需要包装，您可以使用一些像这样的伪元素法术。如果文本可以包装解决方案可能是在display: inline-block上设置td:not(:empty)，但边界的行为会有所不同。

＆＃13;

<html>
  <head>
    <style>
      table, td {
        border: solid;
        border-collapse: collapse;
      }

      td:not(:empty) {
        width: 1px;
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <table style="width: 100%">
      <tr>
        <td>This is some text</td>
        <td>And some more</td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

＆＃13;

如何围绕文本制作一个紧密的单元格并扩展空文本？

2 个答案: