如何设置<table>100%宽度并仅在<tbody>垂直滚动内放置一些高度?

table {
width: 100%;
display:block;
}
thead {
display: inline-block;
width: 100%;
height: 20px;
}
tbody {
height: 200px;
display: inline-block;
width: 100%;
overflow: auto;
}
Run Code Online (Sandbox Code Playgroud)
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>Run Code Online (Sandbox Code Playgroud)
我希望避免增加一些额外的div,我要的是简单的表像这样,当我试图改变显示table-layout,position在CSS表以及更多的东西没有工作好与100%的宽度仅与PX固定宽度.
如何使用Twitter Bootstrap创建类似于表的列表结构,其中一些列占用尽可能多的空间,以容纳该列的最宽元素,并且单个列占用剩余空间?
例如:
Id |Name |Email address
100001|Joe |MamiePVillalobos@teleworm.us
100 |Christine|ChristineJWilliams@dayrep.com
1001 |John |JohnLMiley@dayrep.com
Run Code Online (Sandbox Code Playgroud)
该ID列只需要足够的空间来容纳100001号,这是最长的ID.
" 名称"列占用的空间足以容纳名称Christine.
" 电子邮件"列占用剩余空间.