具有相同TD宽度的多个表

Question

要格式化这两个表，我有一张css表。顶部表格是过滤/排序选择。第二个是可滚动的数据表。

     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>

两个表中的任何一个都没有按列对齐，因此Title / Header列与下面的表列不匹配。它在chrome / IE中也显示出几乎相同，但firefox是一个完整的shamble。

我无法得到这个合适的人，任何帮助都将受到赞赏。

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

您想要将两个表的列垂直对齐吗？ 如果是这样，我有一个解决方案 我已经改变了你的css，你在第二张桌子里错过了tr。

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

这应该可以解决问题。请注意，由于第二个表的滚动条会有一点余量，但您可以通过在第一个数组中添加一个带有滚动条宽度的选项卡来轻松更改它。希望它会有所帮助

＆＃13;

＆＃13;

#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 */
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;