multiple tables with the same TD width - html

Question

To format these 2 tables I have a css sheet. The top table is a filter/sort selection. The second is a scrollable data table.
div#scrollTableContainer {
width: auto;
margin: 20px; /* just for presentation purposes */
border: 1px solid black;
}
#tHeadContainer {
background: #CC3600;
color: black;
font-weight: bold;
}
#tBodyContainer {
height: 750px;
overflow-y: scroll;
}
td:first-child {
min-width: 5%; /* EDIT */
max-width: 5%;
border-left:0;
}
td:first-child + td {
min-width: 4%;
max-width: 4%;
}
td:first-child + td + td {
min-width: 4%;
max-width: 4%;
}
<div id="scrollTableContainer">
<div id="tHeadContainer">
<table border="1" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th bgcolor="<%=bgc0%>">USED</th>
<th bgcolor="<%=bgc0%>">STATUS</th>
</tr>
</table>
</div>
<div id="tBodyContainer">
<table border="1" align="center" id="tBody" class="TableData">
<td> stuff </td>
<td> More stuff </td>
</table>
</div>
</div>
Neither of the 2 tables are aligning column wise so that the Title/Header columns do not match the tables columns below. It also shows almost the same in chrome/IE, but firefox is a complete shamble.
Im at a loss to get this right guys, any help will be appreciated.

Answer 1

div#scrollTableContainer {
width: auto;
margin: 20px;
/* just for presentation purposes */
}
#tHeadContainer {
background: #CC3600;
color: black;
font-weight: bold;
}
#tBodyContainer {
height: 750px;
}
th:first-child, td:first-child {
min-width: 15%;
max-width: 15%;
width: 15%;
}
td:first-child+td {
min-width: 4%;
max-width: 4%;
}
td:first-child+td+td {
min-width: 4%;
max-width: 4%;
}
<div id="scrollTableContainer">
<div id="tHeadContainer">
<table border="1" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th bgcolor="<%=bgc0%>">USED</th>
<th bgcolor="<%=bgc0%>">STATUS</th>
</tr>
</table>
</div>
<div id="tBodyContainer">
<table border="1" align="center" width="100%" cellpadding="0" cellspacing="0">
<td> stuff </td>
<td> More stuff </td>
</table>
</div>
</div>

Answer 2

You want to align the columns of both table vertically right?
If that is so, I have a solution for you
I have changed your css and u missed tr in second table.
https://jsfiddle.net/9ccwkoav/
div#scrollTableContainer {
width: auto;
margin: 20px; /* just for presentation purposes */
border: 1px solid black;
}
#tHeadContainer {
background: #CC3600;
color: black;
font-weight: bold;
}
#tHeadContainer th{
width:50%;
}
#tBodyContainer {
height: 750px;
overflow-y: auto;
}
.TableData{
width:100%;
}
.TableData td{
width:50%;
}

Answer 3

This should do the trick. Notice that there will be a little margin because of the scroll bar of the second table, but you can easily change it by adding a tab in the first array with the width of the scrollbar. Hope it will help
#scrollTableContainer {
width : 96%;
margin : auto;
border : 1px solid #ccc;
}
#tHeadContainer {
background-color : green;
width : 100%;
}
#tBodyContainer {
width : 100%;
height : 750px;
overflow-y : scroll;
}
#tHeadContainer table, #tBodyContainer table {
border-collapse : collapse;
width : 100%;
}
td, th {
border : 1px solid black;
}
tr {
width : 100%;
}
th:first-child, td:first-child {
min-width : 15%;
max-width : 15%;
width : 15%; /* Tweak this value to change the first column width */
}
<div id="scrollTableContainer">
<div id="tHeadContainer">
<table>
<tr>
<th>USED</th>
<th>STATUS</th>
</tr>
</table>
</div>
<div id="tBodyContainer">
<table>
<tr>
<td>Stuff</td>
<td>Some other stuff</td>
</tr>
</table>
</div>
</div>