Question

尝试使用div而不是表格，即使CSS中的宽度设置相同，列也不会排列。 Here it is

<div class="title_container">
            <div class="duty_date">
                Date
            </div> 
            <div class="duty_name">
                Duty Name
            </div>
            <div class="duty_start">
                Start Time  
            </div>
            <div class="duty_end">
                End Time
            </div>
            <div class="duty_location">
                Duty Location
            </div>
            <div class="duty_manager">
                Duty Manager
            </div>                
            <div class="duty_members">
                Required Members
            </div>
            <div class="duty_spaces">
                Spaces
            </div>
            <div class="duty_notes">
                Notes
            </div>
        </div>

和css：

.duty_date, .duty_name, .duty_start, .duty_end, .duty_location, .duty_members,               

.duty_manager, .duty_spaces, .duty_notes {
text-align: center;
border-right-style:solid;
border-right-width: 1px;
display: table-cell;
vertical-align: middle;
height:50px;
}


.duty_date, .duty_spaces {max-width:70px; width:70px;}

.duty_name, .duty_location {max-width: 150px; width:150px;}

.duty_start, .duty_end {max-width:90px; width:90px;}

.duty_manager, .duty_members {max-width:80px; width:80px;}

.duty_notes {max-width:180px; width:180px;}

我应该只使用一张桌子吗？

Answer 1

我应该只使用一张桌子吗？

是的！这是表格数据，因此您应该使用table。

认为“表必须永远不会使用”是一种常见的谬误。尝试使用table模拟div与使用表格进行布局一样糟糕。

Answer 2

在这种情况下，我认为使用表格是完全可以接受的。在页面中使用表格作为实际设计元素时，<div>标签是更好的选择，但是为了显示如本例所示的简单信息，请继续使用表格。

Answer 3

IMO是的 - 绝对是一张桌子，让自己免于痛苦！

Answer 4

从语义的角度来看，使用表格是“表格数据”的正确选择，这也使您能够使用更加结构化的标签，如<th>。请查看规范http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html。

Answer 5

在我的Firefox浏览器中，它看起来不错。您必须拥有其他浏览器。但我建议你使用表，因为这正是html表的用途，除非你有充分的理由不这样做。

Answer 6

如果您想使用<div>，请使用：

.duty_date, .duty_name, .duty_start, .duty_end, .duty_location, .duty_members,
.duty_manager, .duty_spaces, .duty_notes
{ 
    text-align: center;
    border-right-style: solid; 
    border-right-width: 1px; 
    display: block;  
    height: 50px;
    line-height: 50px;
    float: left;
}

这是未经测试的：）

将line-height设置为等于元素的高度将为您提供垂直居中的文本。您可能必须在每行之后添加清除元素。所以它会像：

<div>Row1Cell1</div>
<div>Row1Cell2</div>
etc...
<div class="clear"></div>
<div>Row2Cell1</div>
etc...

使用

.clear
{
    clear: both;
}

代替桌子的Div不排队

6 个答案: