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>
Comments
Post a Comment