css - CSS3 列基线

Question

我在 div 中显示大量表格。我使用 CSS column-count 将此 div 划分为列。

但是，由于基线，它正在扩大单元格以与彼此相邻的表格对齐。指定高度，即使使用 !important 似乎也被忽略了。

我怎样才能防止这种行为？

更新1：

包含在 div 中的 HTML 示例表 (id="data")

<table class="res card">
<colgroup>
<col class="pos-col">
<col class="cardnum-col">
<col class="selection-col">
<col class="price-col">
</colgroup>
<thead><tr><th colspan="4"><span>15:50. Doncaster</span></th></tr></thead>
<tbody>
<tr>
<td class="pos">1st.</td>
<td class="cardnum">1</td>
<td class="selection">A Vos Gardes</td>
<td class="price">5/1&nbsp;</td>
</tr>
</tbody>
<tbody><tr><td colspan="4" class="NR">NR 2. Bekkensfirth</td></tr>   </tbody>
</table>

CSS

#data {
padding: 10px;
-webkit-column-count: 7;
-webkit-column-gap: 10px;
border: 1px solid black;
}

.card { 
width: 100%;
table-layout: fixed;
-webkit-column-break-inside:avoid; 
font-family: Arial, Helvetica, sans-serif;
color:#666;
font-size: 12px;
background: #eaebec;
margin: 0;
margin-bottom: 4px;
border: #ccc 1px solid;
border-radius:3px;
}

Answer 1

将表格布局更改为固定，这可能有效

table {
     table-layout: fixed;
}