It's been hours and I'm still struggling with a seemingly simple div table. The issue is that the column headers refuse to resize properly to match the width of the table or rows. The rows seem fine, but the headers just won't cooperate.
I don't want to use fixed widths because my next table might have a different number of columns. Currently, the column headers are all bunched up on the left side next to each other, completely out of sync with the rows...
<style type="text/css>
.table-container {
display: table;
width: 50%;
table-layout: fixed;
border-collapse: collapse;
}
.table-heading {
font-weight: bold;
display: table-caption;
background-color: #e9e9e9;
text-align: center;
padding: 8px;
line-height: 21px;
font-size: 18px;
color: #CA8327;
}
.table-row {
display: table-row;
text-align: center;
}
.table-row-shade {
display: table-row;
text-align: center;
background-color: #e9e9e9;
}
.table-col {
display: table-cell;
text-align: center;
border: 1px solid #ca8327;
}
</style>
<div class="table-container>
<div class="table-heading>Approximate Dimensions (inches)</div>
<div class="table-col>
<div class="table-col>size</div>
<div class="table-col>head strap (inc. frame)</div>
<div class="table-col>chin strap</div>
<div class="table-col>lbs.*</div>
</div>
<div class="table-row-shade>
<div class="table-col>XXS</div>
<div class="table-col>3-9 inches</div>
<div class="table-col>2-3 inches</div>
<div class="table-col>< 5 lbs*</div>
</div>
<div class="table-row>
<div class="table-col>XS</div>
<div class="table-col>5-13 inches</div>
<div class="table-col>3-7 inches</div>
<div class="table-col>5 - 10lbs*</div>
</div>
</div>