Question

在下面的代码中，我为表格单元格设置了max-width，因此它们都具有相同的宽度，无论它们携带的内容是什么，vertical-align都设置为顶部。但是正如你所看到的那样，第一个单元格与第二个单元格相比非常冗长，因此在第2个第5个和第3个第6个表格单元格之间留下了巨大的空间。有没有办法删除那个空间？我的意思是我希望第5和第6个细胞立即跟随上述细胞而不是等待第1个细胞结束。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你想要的问题是表被设置为像这样的功能，所以它保持一致对齐和组织。如上所述，如果您希望单独的方块像不同大小的砖块一样堆叠在一起，您可能希望更多地了解砌体布局，因为它不能以这种方式工作，因此表格不会在该实例中工作。＆lt; < / p>

Answer 2

如果我理解正确，你不关心细胞5和6是否与细胞4对齐，只要它们彼此对齐并摆脱那个空白区域。在许多情况下，最好使用div而不是表来做这类事情，但这是一个保留表格的解决方案。

如果要打破行对齐，则必须创建第二个表，因此第一个表将包含单元格1和4，第二个表格将包含单元格2,3,5和6.对于您的样式，请使用display:inline-block使表格彼此相邻，如果您希望两个表格在顶部对齐，则将它们与<div>（永不使用嵌套表格）一起放在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>

如何删除表格单元格中的空白区域？

2 个答案: