HTML表格的宽度为100%,在tbody中具有垂直滚动

HTML CSS

樱Tony

2020-03-19

如何设置<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;
}
  
<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>

我希望避免增加一些额外的div,我要的是简单的表像这样,当我试图改变显示table-layoutposition和CSS表更事情不是100%的宽度仅与PX固定宽度的工作好。

第2341篇《HTML表格的宽度为100%,在tbody中具有垂直滚动》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android