如何防止表格中的该div增加单元格高度？

Question

I have an example of the problem here: http://jsfiddle.net/s6t3p/

I have the following markup:

<h1>Just Text</h1>
<table>
    <tr>
        <td class='cell'>Some Text</td>
        <td class='cell'>More Text</td>
    </tr>
</table>


<h1>With Icon Cell</h1>
<table>
    <tr>
        <td class='cell'>Some Text</td>
        <td class='cell-ico'><div class='ico'></div></td>
        <td class='cell'>More Text</td>
    </tr>
</table>

And the following CSS:

table,td,tr
{   
    margin: 0; padding: 0;
    border: none; outline: none;
    font-size: 100%; font: inherit;
    vertical-align: baseline;
}

table  { border-collapse: collapse; border-spacing: 0;}
.cell 
{
    border:solid 1px #DDD; padding:0 5px; text-align:left;
    line-height:27px;
}
.ico {width:24px; height:24px; background:#05F;}

I wish for each cell to be 27px in height. This is the case for the 1st table. But the second table which contains a cell with a 24px div has a height of 32px. I don't understand why. It seems like a 24x24 div should fit inside fine without increasing the cell height.

Can anyone explain why this is happening and how to fix it so that I can keep the cells at a height of 27px? I am currently testing with FireFox 29.

Thanks for any help.

Answer 1

If you are looking to display tabular data , then this is the way to go :)

The behaviour is caused by vertical-align: baseline; .

Just reset the vertical-align for .cell-ico and provide a set height. Give .ico a height of 100%.

Have a fiddle

.cell-ico {
    height: 24px;
    vertical-align: top;
}
.ico {
    width:24px;
    height: 100%;
    background:#05F;
    display: block;
}

Answer 2

I'd suggest you use div elements with their respective display attributes set to either table , table-row, table-cell , etc. Instead of actual tables. The use of tables as a layout techique is discouraged since HTML4 . This approach may be a little bulky, but for layout purposes it'll save you some trouble dealing with css.

Check this jsfiddle for example :

HTML :

<div id="Table">
    <div class="row">
        <div class="cell">Lorem ipsum</div>
        <div class="cell">Lorem ipsum</div>
    </div>
    <div class="row">
        <div class="cell">Lorem ipsum</div>
        <div class="cell">Lorem ipsum</div>
    </div>
</div>
<br/>
<br/>
<div id="Table">
    <div class="row">
        <div class="cell2"><div class="oddDiv">im inside a div</div></div>
        <div class="cell2">Lorem ipsum</div>
    </div>
    <div class="row">
        <div class="cell2">Lorem ipsum</div>
        <div class="cell2">Lorem ipsum</div>
    </div>
</div>

CSS :

#Table {
    display: table;
    width: 200px;
    border-collapse: collapse;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    border: 1px solid blue;
    height: 27px;
}

.cell2 {
    display: table-cell;
    border: 1px solid red;
    height: 24px;
}

.oddDiv {
    height: 24px;
    width: 24px;
    overflow: hidden;
}

Update, regarding semantics :

It's true that from a developer's point of view there's no difference between a table markup element and a generic container like a div with the appearance of a table in terms of layout and even code comprehension. But, there's no way for an accessibility tool, say, an screen reader, to discern between a bunch of div elements with different id's, unless the tool was proprietary or there was some kind of convention for special id's to use for this kind of purposes (which I doubt). So for layout purposes divs are the way to go, but if semantics are a concern, the use of tables is the best solution.

Answer 3

try to add this inside your CSS

td{
   vertical-align:middle;
   height:27px;
}

Answer 4

Looks like vertical-align: baseline; applied to all tags table, tr, td is messing it up. Remove it and try it out.