Question

Trying to use divs rather than a table and the columns won’t line up even though they all have the width set the same in the 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>

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

Should I just use a table?

Answer 1

Should I just use a table?

Yes! That’s tabular data, so you should just use a table.

It’s a common fallacy to think “tables must never be used”. Trying to emulate a table with divs is just as bad as using tables for layout.