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

我这里有一个问题的例子：

我有以下标记：

<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>

我希望每个电池的高度为27像素。这是第一个表的情况。但是第二个表包含一个24px div的单元格，其高度为32px。我不明白为什么。似乎24x24 div应该适合内部精细，而不增加单元格高度

有人能解释为什么会发生这种情况，以及如何修复它，以便我能将电池保持在27像素的高度吗？我目前正在测试Firefox29

---

感谢您的帮助。

如果您希望显示表格数据，那么这就是方法：）

该行为是由

垂直对齐：基线引起的

只需重置
单元格ico的
垂直对齐
，并提供设置的高度。给
.ico
一个100%的高度


我建议您使用div元素，并将其各自的显示属性设置为
表
、
表行、
表单元格
等，而不是实际的表。将表格用作布局技术。这种方法可能有点笨重，但出于布局的目的，它将为您节省一些处理css的麻烦

检查：

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>

#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;
}

关于语义的更新：

<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>

#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;
}

的确，从开发人员的角度来看，表标记元素和一般容器（如div）之间没有区别，它在布局甚至代码理解方面都具有表的外观。但是，辅助功能工具（比如屏幕阅读器）无法区分一组具有不同id的div元素，除非该工具是专有的，或者有某种特殊id用于此类目的的约定（我对此表示怀疑）。因此，对于布局而言，div是一种方法，但是如果语义是一个问题，那么使用表是最好的解决方案。
尝试将其添加到CSS中

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

看起来像垂直对齐：基线；应用于所有标签表，tr，td将其搞乱。
删除它并试用。
从纯语义的角度来看，表格数据应该在
中。表有一些怪癖，但一些基本的CSS可以控制它们，它们可以很漂亮：）@misterManSam请不要鼓励使用表！那是一个过时的标准。关于布局，无论你用
s做什么，你都可以用
s做得更好。因此我说：表格数据应该在
中。放松：）数据实际上是一个表格记录列表，所以我同意曼萨姆先生的观点。虽然我很好奇，但通过将div作为表的组件呈现，我可以避免什么“麻烦”？这样做，您就失去了块元素的好处，例如可以访问框阴影。你得到了什么？这与说居中文本应该在
center
标记中的道理相同，但你现在不这样做，对吗？。
表格
、
表格行
和
表格单元格
属性也用于表格数据。使用div和表之间没有区别，只是浏览器和webkit更好地支持div。表格已过时。您正在进行布局吗？记住表格是用来做布局的。是的，请不要用表格做布局。一只小狗在每一次页面加载时都会这样死去。你想达到什么目的，使div的高度与桌面单元格相同，或者使div居中…？为什么每个人都认为他在尝试制作布局？我没看到有人这么说？！是的，真正的数据是一个表格记录列表。我不使用桌子，因为我喜欢它的布局。