Html 使车身显示为块改变了AD的外观_Html_Css

Html 使车身显示为块改变了AD的外观

html css

Html 使车身显示为块改变了AD的外观,html,css,Html,Css,我从这张桌子开始：（来源：）为了使tbody部分可滚动，我将其显示指定给块，该块将thead行的第一个元素拉伸到tbody块的宽度。（来源：）我可以通过简单地跨越和行中的所有列来处理这个问题，但是如果有更好的方法，我希望看到它。以下是我的标记： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table</title>

我从这张桌子开始：
（来源：）

为了使tbody部分可滚动，我将其显示指定给块，该块将thead行的第一个元素拉伸到tbody块的宽度。
（来源：）

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

<!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>


桌子
正文{margin:0；padding:0；}
表{宽度：100%；高度：550px；边框：1px纯黑色；}
thead，tfoot{宽度：100%；背景色：#eee；}
t正文{**display:block；**高度：320px；宽度：100%；overflow-y:scroll；}
tbody tr:n类型（奇数）{背景色：#cfc；}
tbody tr:n类型（偶数）{背景色：#fcc；}
th，td{填充：0.5em；边框：1px纯黑色；}
tfoot h1{文本对齐：居中；}
显示数据的表格
Lorem ipsum dolor sit amet，Concertetur
Lorem ipsum dolor sit amet，Concertetur
Lorem ipsum dolor sit amet，Concertetur
Lorem ipsum dolor sit amet，Concertetur
Lorem ipsum dolor sit amet，Concertetur
Lorem ipsum dolor sit amet，Concertetur
Lorem ipsum dolor sit amet，Concertetur
Lorem ipsum dolor sit amet，Concertetur
Lorem ipsum dolor sit amet，Concertetur
Lorem ipsum dolor sit amet，Concertetur
Lorem ipsum dolor sit amet，Concertetur
Lorem ipsum dolor sit amet，Concertetur
页脚

您可以将所有内容（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>

调整以适应您的需要。

您看过这个吗？这就是我想我最终会做的，我很确定这是我能做的最好的。谢谢

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