div 内に多数のテーブルを表示しています。CSS column-count を使用して、この div を列に分割しました。
ただし、ベースラインにより、セルを拡大して互いに隣接するテーブルに並べます。高さを指定しても、 !important は無視されるようです。
どうすればこの動作を防ぐことができますか?
更新 1:
div (id="data") 内に含まれる HTML の例のテーブル
<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 </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;
}