html - multiple tables with the same TD width -

to format these 2 tables have css sheet. top table filter/sort selection. second scrollable data table.

     div#scrolltablecontainer {       width: auto;       margin: 20px; /* 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 2 tables aligning column wise title/header columns not match tables columns below. shows same in chrome/ie, firefox complete shamble.

im @ loss right guys, appreciated.

div#scrolltablecontainer {    width: auto;    margin: 20px;    /* 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>