css - 代替表的 div 不排队

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;}

我应该只使用一张 table 吗？

Answer 1

Should I just use a table?

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

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