div table column width doesn't match rows - html

Question

Spending way too much time on (what should be) a simple div table. PROBLEM: the column headers will not resize to the width of the table, or the rows. The rows appear okay, but the column headers don't.
Trying to avoid having fixed widths as the next table I post may have a different number of columns. With the following code the column headers are all scrunched to the left, next to each other, but they don't match 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>
http://jsfiddle.net/Speedy1/t3e3ken6/

Answer 1

You only put table-col rather than table-row
<div class="table-container">
<div class="table-heading">Approximate Dimensions (inches)</div>
<div class="table-row"> <!-- must be a table-row -->
<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>
http://jsfiddle.net/vgjb578s/

Answer 2

Try this http://jsfiddle.net/t3e3ken6/1/
It's because you have put the class "table-col" next to your heading. Change it to "table-row" and the problem is solved.
<div class="table-row">
<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>