如何构建一个所有行和单元格都彼此相邻的 HTML 表格？答案

【问题标题】：How do you build an HTML table with all rows and cells adjecent to each other?如何构建一个所有行和单元格都彼此相邻的 HTML 表格？
【发布时间】：2011-04-01 09:37:11
【问题描述】：

谁能帮我解决以下两种情况之间的差异。在这两种情况下，我都将一张图片分割成几块并将它们放在一张桌子上，这样它看起来仍然是一张图片。

但是，在一种情况下，我已将 doctype 设置为，而在另一种情况下，没有设置 doctype。当没有设置文档类型（没有边框间距或单元格间距或单元格和行之间的任何其他空格）时，会显示我的预期结果。但是，当设置 doctype 时，行之间有 1px 的填充。

这两种情况的 HTML 是相同的，只是文档类型不同

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
    .table{
        display: table;
    }

    .row{
        display: table-row;
    }

    .cell{
        display: table-cell;
    }
</style>
</head>
<body>
    <div id='slider' class='table'>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_01.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_02.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_03.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_04.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_05.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_06.gif' alt='slide' /></div>
        </div>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_07.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_08.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_09.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_10.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_11.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_12.gif' alt='slide' /></div>
        </div>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_13.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_14.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_15.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_16.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_17.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_18.gif' alt='slide' /></div>
        </div>
    </div>
</body>
</html>

有人可以向我解释为什么当 doctype 设置为 HTML 时行之间有 1px 的间隙吗？

【问题讨论】：

你试过border-collapse: collapse; 吗？此外，拥有一组像表格一样的 div 函数的目的是什么？为什么不直接使用table？
你为什么不用一张桌子？
因为在任何情况下我都倾向于严格遵守不使用表格的规则，除了表格数据。在这里，我正在尝试为图像创建布局。不过，使用表格会更容易。
我不认为使用这么多 DIV（在表格模式下，不少于）在语义上会更有意义。取决于我猜的用例

标签： html css doctype

【解决方案1】：

@Shafee：试试 --

.row img {
    display: block;
}

编辑

简短的解释：您的带有DOCTYPE 的代码在您的浏览器中触发了严格模式，该模式以不同的方式处理图像的显示。

更长的解释：

在早期，实验严格模式总是提高评论说图像突然有了不可能的奇怪底部边距删除。原因是严格模式<img /> 是一个内联元素，这意味着一些空间应该是为可能的下降者保留 g、j 或 q 等字符。当然图像没有下降器字符，所以空间从来没有已使用，但仍需保留。

解决方案是显式声明图片块级元素：img {display: block}.

尽管如此，浏览器供应商 Mozilla 特别是，认为这是一个令人困惑的情况，他们引入了“几乎严格模式”。这被定义为严格模式，但与图像仍然是块，并且不是内联元素。

最常见的文档类型，包括我使用的一个，触发几乎严格的模式。图像的处理是迄今为止之间最重要的区别几乎严格模式和真正严格模式。

来源：http://www.quirksmode.org/css/quirksmode.html

【讨论】：

是的。这样可行。谢谢 :D.. 但你能解释一下为什么会这样吗？

【解决方案2】：

删除元素周围的空白。

【讨论】：

【解决方案3】：

Charles Upsdell 的site 提供了有关DOCTYPE 一般如何影响渲染的更多信息。

【讨论】：