gpt4 book ai didi

html - 使 tbody 显示为 block 会改变 thead 的外观

转载 作者:太空宇宙 更新时间:2023-11-04 13:44:25 24 4
gpt4 key购买 nike

我从这张表开始: not block level
(来源:jimslounge.com)

为了使 tbody 部分可滚动,我将它的显示分配给 block ,它将 thead 行的第一个元素拉伸(stretch)到 tbody block 的宽度。 not block level
(来源:jimslounge.com)

我可以通过简单地跨越行和行中的所有列来处理这个问题,但如果有更好的方法,我希望看到它。这是我的标记:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style type="text/css">
body {margin: 0; padding: 0;}
table { width:100%; height: 550px; border: 1px solid black;}
thead, tfoot { width: 100%; background-color: #eee;}
tbody {**display: block;** height: 320px; width: 100%; overflow-y: scroll;}
tbody tr:nth-of-type(odd) { background-color:#cfc; }
tbody tr:nth-of-type(even) { background-color:#fcc; }
th, td {padding: 0.5em; border: 1px solid black;}
tfoot h1 {text-align: center;}
</style>
</head>
<body>
<table>
<thead>
<tr><th><img src="mrRat.png"> </th><th colspan="4" id="title"><h1>A Table Displaying Data</h1></th><th> </th></tr>
</thead>
<tbody>
<tr>
<td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
<td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
<td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
<td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
<td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
<td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
</tr>

<!-- most rows removed for sake of clarity -->

<tr>
<td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
<td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
<td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
<td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
<td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
<td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="6"><h1>the footer</h1></td></tr>
</tfoot>
</table>
</body>
</html>

最佳答案

您可以将所有内容(mr Rat 和标题)放入跨越所有列的 th 中,并使用 CSS 按照您的需要布置标题。例如:

<thead>
<tr><th colspan="6"><img id="mrrat" src="mrRat.png"/><h1 id="title">A Table Displaying Data</h1></th></tr>
</thead>

CSS:

#mrrat {
float: left;
width: 100px;
height: 60px;
margin: 20px;
}

根据您的需要进行调整。

关于html - 使 tbody 显示为 block 会改变 thead 的外观,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22594761/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com