CSS3 столбец базовый

Question

Я показываю большое количество таблиц внутри div. Я разделил этот div на столбцы, используя CSS column-count.

Тем не менее, из-за базового уровня ячейки увеличиваются, чтобы выровняться с таблицами, смежными друг с другом. Указание высот, даже с! Важный, похоже, игнорируется.

Как я могу предотвратить это поведение?

Обновление 1:

Пример HTML таблицы, содержащейся в div (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;
}