我有一个简单的,我想要一个带有对齐列的可滚动表。
我试过这个(来自https://stackoverflow.com/a/11483686/1599054):
<table>
<thead>
<tr><th>loooooooooooooong</th><th>headers</th></tr>
</thead>
<tbody>
<tr><td>t</td><td>t</td></tr>
<tr><td>t</td><td>t</td></tr>
<tr><td>t</td><td>t</td></tr>
</tbody> </table>
CSS:
thead { display:block; background: green; margin:0px; cell-spacing:0px; left:0px; }
tbody { display:block; overflow:auto; height:100px; }
th { height:50px; }
td { height:50px; background:blue; margin:0px; cell-spacing:0px;}
您可以在此处查看:http://jsfiddle.net/Rfgm2/1/
我的问题是我有一个小内容但是大标题,他们是“动态”对齐他们的意思吗?
答案 0 :(得分:1)
我找到了一个适合你的工作案例。您必须使用div
和table
的组合来实现此目的:
<table cellspacing="0" cellpadding="0" border="0" width="325">
<tr>
<td>
<table cellspacing="0" cellpadding="1" border="1" width="300" >
<tr>
<th width="50%" style="word-wrap:break-word;">Short heading</th>
<th width="50%" style="word-wrap:break-word;">Lonnnnngggeeer heading</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="width:325px; height:48px; overflow:auto;">
<table cellspacing="0" cellpadding="1" border="1" width="300" >
<tr>
<td>col 1 data 1</td>
<td>col 2 data 1</td>
</tr>
<tr>
<td>col 1 data 2</td>
<td>col 2 data 2</td>
</tr>
<tr>
<td>col 1 data 3</td>
<td>col 2 data 3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
jsFiddle这里:http://jsfiddle.net/2ZnWL/1/
答案 1 :(得分:1)
从display: block;
和thead
移除tbody
您将这些元素的默认样式搞砸了。