豎向表頭固定，橫向隨內容滾動，純css，列寬有問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table tbody {
display:block;
height:200px;
overflow-y:scroll;
}
table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
text-align:center;
}
thead th ,tbody td{
width:50px;
}
table thead {
width: calc( 100% - 1em );
}
</style>
</head>
<body>
<div style="width: 800px;">
<div class="table-head">
<table align="center" >
<thead>
<tr>
<th>序號</th>
<th>內容</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>我只是用來測試的</td></tr>
<tr><td>2</td><td>我只是用來測試的</td></tr>
<tr><td>3</td><td>我只是用來測試的</td></tr>
<tr><td>4</td><td>我只是用來測試的</td></tr>
<tr><td>5</td><td>我只是用來測試的</td></tr>
<tr><td>6</td><td>我只是用來測試的</td></tr>
<tr><td>7</td><td>我只是用來測試的</td></tr>
<tr><td>8</td><td>我只是用來測試的</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
相關文章
- 1. bootstrap table 表頭固定 、凍結列、橫向縱向滾動條
- 2. 00011 - layui 表格table列固定寬，且超出屏幕時橫向滾動
- 3. elementUI樹狀圖豎向滾動條和橫向滾動條問題
- 4. element-ui el-tree豎向滾動條和橫向滾動條問題
- 5. 表格表頭固定,內容多時滾動內容
- 6. 純CSS表頭固定
- 7. CSS實現固定表頭 內容溢出滾動
- 8. 一種局部固定表頭的實現方案（橫向可跟隨內容一同滾動，縱向鎖定表頭）
- 9. 動態橫向菜單列表與豎向TableView聯動功能
- 10. Android 橫向列表GridView 實現橫向滾動
- 更多相關文章...
- • jQuery Mobile 列表內容 - jQuery Mobile 教程
- • PHP imagechar - 寫出橫向字符 - PHP參考手冊
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
- • 再有人問你分佈式事務，把這篇扔給他
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章