如何使用 CSS 正确使用带边框的无表格布局？答案

【问题标题】：How to correctly use tableless layout with borders using CSS?如何使用 CSS 正确使用带边框的无表格布局？
【发布时间】：2012-12-12 15:04:23
【问题描述】：

我正在处理一个新的 HTML 页面，我想使用无表格布局。请记住，以下内容只是页面的一部分，但我认为它清楚地描绘了我正在尝试做的事情。

下面的 HTML 旨在呈现六个带有文本的单元格。我希望单元格的大小适当，以包含里面的文本。

我遇到的问题是边框绘制不正确。在 IE 和 Firefox 中，我发现两个问题：

1) 其中一个边框绘制在表格之外。

2) 第一行单元格之间的边框绘制不完整。

<!DOCTYPE html>
<html>
<head>
<style>

html
{
}
.reviewRow 
{    
    clear:both;    
}
.reviewBlock 
{
 float:left; 
 border-top: 1px solid #444; 
 border-left: 1px solid #444;
}
.rightBorder
{
    border-right: 1px solid #444;
}
.bottomBorder
{
    border-bottom: 1px solid #444;   
}
</style>
</head>

<body>
<div class='reviewRow'>
    <div style="width:200px;" class='reviewBlock'>      
        THIS TEXT IS MUCH LONGER THAN THE TEXT IN THE OTHER CELLS
    </div>
    <div style="width: 225px" class='reviewBlock'>      
        ABC
    </div>
    <div style="width: 100px" class="reviewBlock rightBorder">      
        December 25, 2012
    </div>
</div>
<div class='reviewRow bottomBorder'>
    <div style="width:300px;" class='reviewBlock'>      
        Hello, World!
    </div>
    <div style="width: 125px" class='reviewBlock'>      
        123
    </div>
    <div style="width: 100px" class="reviewBlock rightBorder">      
        May 1, 2013
    </div>
</div>
<div style='clear:both;'></div>
</body>
</html>

【问题讨论】：

为什么不使用表格？表格绝对适合数据表格......它们是为您的目的而制作的
这里不使用它们的一个特别原因是我不希望数据显示在每行具有相同数量（和布局）单元格的网格中。我想我可以为每一行使用不同的表格，但我给人的印象是 CSS 是首选解决方案。我可能是错的。这就是我在这里问的原因:-)
对于还不能即时可视化 HTML/CSS 代码的新手来说，这就是它的外观：jsfiddle.net/BK5Yq/1:P
@Andy 嵌套表格很难设置样式。例如，如何使用 CSS 选择器选择外部表格的单元格（同时不选择内部单元格）？
@Andy 不，它没有。浏览器会插入一个 TBODY 元素，因此选择器必须是 #table > tbody > tr > td。

标签： html css layout doctype

【解决方案1】：

不要像其他人所说的那样，不要使用表格制作布局，但是当涉及到表格数据时，如果您使用 div 制作表格对我来说没有任何意义，那就不要使用用于设计布局的表格，但您应该将其用于表格数据

如果你想使用你可以参考this

【讨论】：

先生。外星人，我听从了你的建议。我将这两行写成单独的表格，因为它们有不同的布局。当我使用border-collapse 时，一切都很完美，除了一件事：两行之间有一个双边框（因为它们是单独的元素，每个元素都有自己的边框）。我想我可以省略顶行的底部边框，但这有点难看；你能推荐一些更好的吗？
为什么要分两行布局？使用 colspan 和 rowspans
假设，为了讨论，我想做一个 600px 宽的表格。第一行是三个单元格，每个 200px 宽，第二行是两个单元格，每个 300px 宽。如果不对每一行使用单独的table 标签，我就无法做到这一点。如果你知道的更好，请赐教。
你所做的正是我所期望的：两个表格元素。我以为你是说我可以用一个表格元素来完成（1 个表格、3 个字段、2 个字段）。
@DanielAllenLangdon 我不知道你有奇怪的列宽:)

【解决方案2】：

顺便说一下，回答这个问题...你可以使用display:table, table-cell and table-row（在CSS3中）

但我同意 Alien 先生的观点：只需将表格用于表格数据。

【讨论】：

【解决方案3】：

查看 html 元素的高度是根据其中的内容计算的，除非您明确指定它。

您的第二个 div 只占用了显示 ABC 所需的高度，因此边框只显示了这么多。要解决此问题，您必须为每个 div 指定一定的高度，以便它们按照您的需要显示。

如果您尝试以表格方式显示数据，请使用表格。他们在那里只是为了那个目的。显然，您可以为它们设置样式以使它们更好看。

【讨论】：

【解决方案4】：

如果您尝试对表格数据执行此操作，那么请务必使用表格，这就是它的用途。当 Excel 是更好的工具时，不这样做就像尝试使用 Photoshop 制作电子表格一样。

您可以使用colspan 属性更改单元格占用的列数。当然，默认情况下，一个单元格占用 1 列 (colspan="1")，但如果您需要它占用更多，您只需更改数字即可。您可以使用rowspan 对行执行相同的操作。

【讨论】：