CSS3 column baselining

Question

I am displaying a large number of tables inside a div. I have divided this div into columns using CSS column-count.

However, due to baselining, It is enlarging cells to line up with tables adjacent to each other. Specifying the heights, even with !important seem to be ignored.

How can I prevent this behaviour?

enter image description here

Update 1:

HTML Example table contained within a 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;
}

It will be useful if you paste the markup + CSS. Or a link so we can have a look :) — Teknotica, Jan 25 '15 at 13:05
What ”baselining” are you talking about, and what “it” is enlarging exactly what? — Jukka K. Korpela, Jan 25 '15 at 15:48
The code included does not produce the rendering shown in the image. — Jukka K. Korpela, Jan 25 '15 at 15:51

score 0 · Answer 1 · answered Jan 25 '15 at 13:07

0

Change the table layout to fixed, this may work

table {
     table-layout: fixed;
}

answered Jan 25 '15 at 13:07

Emonadeo

499
3
13

table-layout: fixed has no effect – Michael Brown Jan 25 '15 at 13:16

CSS3 column baselining

1 Answers1