樣式化動態生成的表格時遇到問題。用戶可以選擇有多少列,其中一些列具有固定的長度。我怎樣才能讓其他人給出剩餘空間的百分比,而不必每次都指定列的確切寬度,而不用不同的數據/不同瀏覽器的不同列寬?HTML表格樣式
實施例:
<style type="text/css">
table{
width:800px;
border:1px solid #CCCCCC;
/* table-layout: fixed; */
}
table td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border:1px solid #EEEEEE;
}
table tbody td.active{
text-align:center;
width:100px; /* fixed */
}
table tbody td.option{
width:100px; /* fixed */
}
table tbody td.nonfixed{
width:auto;
}
</style>
<table>
<thead>
<tr>
<td>Name</td>
<td>Description</td>
<td>Active</td>
<td colspan="2">Options</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5"><a href="">+ Add new row</a><td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="nonfixed">[Name 1]</td>
<td class="nonfixed">[Description 1]</td>
<td class="active">[X]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
<tr>
<td class="nonfixed">[Name 2]</td>
<td class="nonfixed">[Description 2]</td>
<td class="active">[0]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
</tbody>
</table>
在該示例中兩個「非固定」列應具有完全相同的寬度。當用戶添加一個不固定的列或將第一列與最後一列切換時,這也應該起作用。
誰能幫助我?
這是幾乎可以肯定的是,你將需要JavaScript來解決這個問題。你在那方面嘗試過什麼? –
解決此問題時出現以下問題:http://stackoverflow.com/questions/14444436/html-table-thead-width-depending-on-tbody-in-chrome – Simon