如何删除 table 单元格中的空 space？

Question

在下面的代码中，我为 table 个单元格设置了 max-width，因此无论它们携带的内容如何，它们都具有相同的宽度，并且 vertical-align 设置为顶部。但是正如您所看到的，与第二个和第三个单元格相比，第一个单元格相当长，因此在第 2-5 个和第 3-6 个 table 个单元格之间留下了巨大的 space。有什么方法可以删除 space 吗？我的意思是我希望第 5 个和第 6 个单元格立即跟随上述单元格，而不是等待第一个单元格结束。

table tr td {
  vertical-align:top;
  max-width:90px;
  background-color: #dedede;
  color: black
}

<table>
  <tr>
    <td>this is first cell. this will be quite lengthy</td>
    <td>this is second cell</td>
    <td>this is third cell</td>
  </tr>

  <tr>
    <td>this is fouth cell</td>
    <td>this is fifth cell</td>
    <td>this is sixth cell</td>
  </tr>
</table>

Answer 1

您想要的问题是 tables 被设置为像这样运行，因此它使所有内容保持一致和有条理。如前所述，如果您希望单独的方块像不同大小的砖块一样堆叠在一起，您可能需要更多地了解砌体布局，table 在这种情况下不起作用，因为它不是为那样工作而构建的。

Answer 2

如果我没理解错的话，你不关心单元格 5 和 6 是否与单元格 4 对齐，只要它们彼此对齐并去掉空的 space。在许多情况下，对于这种事情，使用 div 比 tables 更好，但这里有一个保留 tables.

的解决方案

如果您想打破行对齐，则必须创建第二个 table，因此第一个 table 将包含单元格 1 和 4，第二个将包含单元格 2、3、 5 和 6。根据您的风格，使用 display:inline-block 使 table 并排放置，并将它们包含在 <div> 中（切勿使用嵌套 table s) 如果您希望两个 table 在顶部对齐，请使用 display:inline; vertical align:top;。最终结果是这样的：

<head>

<style>
table tr td {
  vertical-align:top;
  max-width:90px;
  background-color: #dedede;
  color: black;
}
.talign{
display:inline-block;
}
.dalign{
display:inline;
vertical-align:top;
}
</style>
</head>
<body>
<div class='dalign'>
<table class='talign'>
  <tr>
    <td>this is first cell. this will be quite lengthy</td>
  </tr>
  <tr>
    <td>this is fouth cell</td>
  </tr>
</table>
</div>
<div class='dalign'>
<table class='talign'>
  <tr>
    <td>this is second cell</td>
    <td>this is third cell</td>
  </tr>
  <tr>
    <td>this is fifth cell</td>
    <td>this is sixth cell</td>
  </tr>
</table>
</div>
</body>

如何删除 table 单元格中的空 space？

How to remove empty space in a table cell ?

html

css

html-table

tablecell