css - 潜水员代替桌子未排队

尝试使用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;}

我应该用一张桌子吗？

最佳答案

我应该用一张桌子吗？
对！这是表格数据，所以应该使用table。
认为“永远不要使用桌子”是一种常见的谬论。试图用tables模拟div与使用表进行布局一样糟糕。