Question

我正在使用Trinidad JSF框架并尝试构建固定标头和滚动tbody表。我可以实现这一点，但是当表体中的大多数列没有数据时，tbody列不是thead的宽度。请看下面。

代码段。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.af_table_content {

	border-spacing: 1;
	border: 1px solid black;
}

.af_table_content tbody, .af_table_content thead {
	display: block;	
}
.af_table_content tbody tr {
table-layout:fixed;
}
.af_table_content thead tr th {
	height: 30px;
	line-height: 30px;
	/* text-align: left; */
}

.af_table_content tbody {
	height: 100px;
	overflow-y: auto;
	overflow-x: hidden;
	border-top: 1px solid black;		
}

.af_table_content tbody td,.af_table_content thead th {	
	border-right: 1px solid black;
	/* white-space: nowrap; */
}

.af_table_content tbody td:last-child,.af_table_content thead th:last-child
	{
	border-right: none;
}
</style>
</HEAD>

<BODY>
<table class="af_table_content" cellpadding="1" cellspacing="0"
	border="0" width="100%">
	<thead>
	<tr>
		<th scope="col" ><span
			>Column 1</span></th>
		<th scope="col" ><span
			>Column 2</span></th>
		<th scope="col" ><span
			>Column 3</span></th>
		<th scope="col" ><span
			>Column 4</span></th>
		<th scope="col" ><span
			>Column 5</span></th>
		<th scope="col" ><span
			>Column 6</span></th>
		<th scope="col" ><span
			>Column 7</span></th>
		<th scope="col" ><span
			>Column 8</span></th>
		<th scope="col" ><span
			>Column 9</span></th>
		<th scope="col" ><span
			>Column 10</span></th>
		<th scope="col" ><span
			>Column 11</span></th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td ><span
			>value</span></td>
		<td ><span
			>1</span></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td >				
	</tr>
	<tr>
		<td ><span
			>value</span></td>
		<td ><span
			>1</span></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
	</tr>
	<tr>
		<td ><span
			>value</span></td>
		<td ><span
			>1</span></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
	</tr>
	<tr>
		<td ><span
			>value</span></td>
		<td ><span
			>1</span></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
	</tr>
	<tr>
		<td ><span
			>value</span></td>
		<td ><span
			>1</span></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
	</tr>
	<tr>
		<td ><span
			>value</span></td>
		<td ><span
			>1</span></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
	</tr>
	<tr>
		<td ><span
			>value</span></td>
		<td ><span
			>1</span></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
	</tr>
	<tr>
		<td ><span
			>value</span></td>
		<td ><span
			>1</span></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
	</tr>
	<tr>
		<td ><span
			>value</span></td>
		<td ><span
			>1</span></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
	</tr>
	<tr>
		<td ><span
			>value</span></td>
		<td ><span
			>1</span></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
	</tr>
	<tr>
		<td ><span
			>value</span></td>
		<td ><span
			>1</span></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
	</tr>
	<tr>
		<td ><span
			>value</span></td>
		<td ><span
			>1</span></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>
	</tr>
	

	</tbody>
	</table>
</BODY>
</HTML>

表体宽度相对于桌面

0 个答案: