Question

我正在开发一个新的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>

Answer 1

不要去别人说的，不要使用表格进行布局，但是当涉及表格数据时，如果你使用div来制作表格对我没有任何意义，那就不要使用用于设计布局的表格，但您应该使用它来获取表格数据

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

Answer 2

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

但我同意Alien先生：只是使用表格来表格数据。

Answer 3

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

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

如果您尝试以表格方式显示数据，请使用表格。它们仅用于此目的。你可以明显地设计它们以使它们更好看。

Answer 4

如果您尝试为表格数据执行此操作，那么无论如何使用表格就是它的用途。没有这样做就像试图使用Photoshop制作电子表格时，Excel将是更好的工具。

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

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

4 个答案: