html - CSS HTML tfoot、tbody、thead 复杂样式-6ren

html - CSS HTML tfoot、tbody、thead 复杂样式

转载作者：行者123 更新时间：2023-11-28 16:03:20

27

4

我可以使用 <thead> 吗？里面<tbody>和 <tfoot>除了主要<thead>的 <table> ？

我想在主要组件中设置不同的 thead 样式，但我不明白，为什么更高规范的组件中的一些没有反应，而有些样式适用于每个 <tr>虽然我只将它指定给 <tbody> .

我想尝试不上课。

这是一个简单的例子:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
    background-color: black;
    text-align: center;
    color: black;
}

table > thead   {background-color: pink;} /*0002 - to main thead*/   
table > tbody > thead > tr > th {background-color: skyblue; } /*0005 - to "Final students marks" and "Avarage marks in groups"*/


tbody > tr:nth-child(even) {background: #CCC;} /*0011*/
tbody > tr:nth-child(odd) {background: #FFF;} /* why it styling tfoot?? */

tfoot tr:nth-child(even) {background: sandybrown !important; /*why not work???*/ }
tfoot tr:nth-child(odd) {background: sandybrown !important;}
</style>
</head>
<body>
<table>
					<thead> 
						<tr><th>Number</th><th>Name</th><th>Surname</th><th>Group</th><th>Mark</th></tr>
					</thead>
                    
					<tbody>
						<thead><tr><th colspan="5">Final students marks</th></tr></thead>
                        
						<tr><td>1</td><td>Adam</td><td>Abacki</td><td>A</td><td>4</td></tr>
						<tr><td>2</td><td>Ewa</td><td>Babacka</td><td>B</td><td>5</td></tr>
						<tr><td>3</td><td>Edward</td><td>Cabacki</td><td>A</td><td>3</td></tr>
						<tr><td>4</td><td>Tomasz</td><td>Dadacki</td><td>A</td><td>4</td></tr>
						<tr><td>5</td><td>Anna</td><td>Kowalska</td><td>B</td><td>3</td></tr>
						<tr><td>6</td><td>Marek</td><td>Zawadzki</td><td>A</td><td>5</td></tr>
					</tbody>
                    
					<tfoot>
						<thead><tr><th colspan="5">Average marks in groups</th></tr></thead>
                        
						<tr><td>1</td><td colspan="2"></td><td>A</td><td>4</td></tr>
						<tr><td>2</td><td colspan="2"></td><td>B</td><td>4</td></tr>
					</tfoot>
				</table>

</body>
</html>

这是我想要的最终效果:

最佳答案

<thead>

Permitted content: Zero or more <tr> elements.

Permitted parents: A <table> element.

所以你的表结构应该是:

table
  thead
    tr
      th
  tbody
    tr
      td
  tfoot
    tr
      td

body {
  text-align: center;
}

table {
  width: 100%;
  border: 1px solid black;
  border-spacing: 0;
}

table>thead {
  background-color: pink;
  font-weight: bold;
}

table>tbody>tr:first-child>td,
table>tfoot>tr:first-child>td {
  font-weight: bold;
  background-color: skyblue;
}

tbody>tr:nth-child(odd) {
  background: #CCC;
}

tfoot>tr {
  background: sandybrown;
}

tbody>tr>td:first-child,
tfoot>tr>td:first-child {
  background: yellow;
}

<body>
  <table>
    <thead>
      <tr>
        <th>Number</th>
        <th>Name</th>
        <th>Surname</th>
        <th>Group</th>
        <th>Mark</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="5">Final students marks</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Adam</td>
        <td>Abacki</td>
        <td>A</td>
        <td>4</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Ewa</td>
        <td>Babacka</td>
        <td>B</td>
        <td>5</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Edward</td>
        <td>Cabacki</td>
        <td>A</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Tomasz</td>
        <td>Dadacki</td>
        <td>A</td>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Anna</td>
        <td>Kowalska</td>
        <td>B</td>
        <td>3</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Marek</td>
        <td>Zawadzki</td>
        <td>A</td>
        <td>5</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="5">Average marks in groups</td>
      </tr>
      <tr>
        <td>1</td>
        <td colspan="2"></td>
        <td>A</td>
        <td>4</td>
      </tr>
      <tr>
        <td>2</td>
        <td colspan="2"></td>
        <td>B</td>
        <td>4</td>
      </tr>
    </tfoot>
  </table>

关于html - CSS HTML tfoot、tbody、thead 复杂样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53326449/

27

4

0

文章推荐： javascript - 单击时调用两个函数并返回 false

文章推荐： html - srcset 只加载最大的图像

文章推荐： css - 隐藏的溢出无法按预期在内联元素上工作

html - 上下文类不能覆盖表头颜色类 (.thead-dark/.thead-light)
我正在研究 Bootstrap 4 中的表格。我不知道为什么不应用台灯类中的背景颜色。这是因为台灯无法覆盖暗灯吗？如果是真的，你能告诉我是什么让 thead-dark 优先于此吗？如果不是我想的，请为
html - 在 HTML 中查询使用和不使用标签显示不同的输出
我有两种情况，使用和不使用的 HTML 脚本显示不同。标签。场景 1:(带有标签) HTML PAGE
c - 链表遍历**while(thead != NULL)**和while(thead->next !=NULL)的区别
谁能告诉我 while(thead != NULL) 和 while(thead->next !=NULL) 之间的区别是什么，因为遍历列表 thead != NULL 不工作，而 thead->ne
javascript - 如何修复 table thead 和可滚动的 tbody(thead 包含 3 行)
我有以下问题:我的 table 有大头(3 行)。我想修复thead 和tbody 滚动。我用jquery 但是当我向下滚动时，边框消失了。 $(document).ready(function()
css - 将 thead 和 tbody 元素与固定 thead 和使 tbody 可滚动的能力对齐
我已将以下 CSS 应用于我的表格。 thead, tbody { display: block; } tbody { height: 200px; overflo
html - 具有固定 thead 和可滚动 tbody 的表格； thead 列适合 tbody 列
这个问题在这里已经有了答案: How to set tbody height with overflow scroll (16 个答案) 关闭 5 年前。
css - 在使 thead 固定且 tbody 可滚动后，thead 和 tbody 未正确对齐
我希望我的表格具有固定的 thead 和可滚动的 tbody。我对其应用了以下 CSS: thead, tbody { display: block; } tbody { height:
asp.net - 如何强制 asp.net GridView 控件将第一行包装在标记中
我想使用 Christian Bach's tableSorter client-side table sorting jQuery plugin使用我的 asp.Net GridView 控件。但
javascript - react 错误不能作为的子项出现。参见(未知)> thead > th
我正在开发一个 react - rails 应用程序，但我的控制台中一直出现此错误: ``` Warning: validateDOMNesting(...): cannot appear as a
html - 带有一个 td(全宽)的 thead 和带有 2 列的 tbody(宽度不取决于 thead)
好的，长篇短篇小说。我有一个结构如下的表: longer Heading with a width of 100% cell 1cell 2 cell 3cell 4 而且我希望 th 是
javascript - 元素中的数据表排序和过滤
我正在使用Datatables对我拥有的数据表进行排序/过滤。我希望能够在标题中对两者进行排序和过滤，但是，单击过滤器会使表排序，然后过滤器选择不会保持打开状态。我这里有一个演示:http://co
Java:永远等待 Thead
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果
Javascript 把第一行放在 thead
是否可以使用 javascript 将第一行移动到中？标签？ Server Name Network Zone Operational
css - thead 中的表排序器图标
我有一些 JavaScript 可以将点击的第 th 个元素的类切换为“升序”或“降序”。问:在 css 中，如何显示与 .ascending 或 .descending 关联的 jQuery-UI
html - thead 中有多行的粘性标题表
所以我能够创建一个粘性标题表并且它工作正常。问题是我需要制作另一个带有多行标题的表格，而我目前使用的方法不起作用，正如您在下面的代码中看到的那样。 .table-wrapper { positio
jquery - 右对齐表格中的数值和
几乎有了 - 用动态数据描绘一个表格 - 这可以右对齐表格中的日期和数字列但更重要的是我还想右对齐相应中的标签列柱子。如果我了解幕后情况，下面的这个方法一次一行，如果有匹配，它适用 text-al
html - 样式
我有以下内容: Document Date Buy-from Vendor No.
html - 有什么好处
使用 thead 而不是仅仅使用 td 有什么好处？如果有好处... 最佳答案 HTML 中的 thead、tbody 和 tfoot 元素用于根据内容将表行分组到逻辑部分。您这样做的主要原因有两个:
javascript - 在中迭代时如何选择模板？
我有一个数组: let headers = [ { title: 'First Name', style: 'bold' }, { title: 'Last Name', style:
python - Thead.join() 仅在所有线程完成后才帮助打印字符串
我目前正在尝试编写一个实现以下功能的函数: 按随机顺序从“消息”列表中获取所有消息，同时确保没有重复的消息。在延迟 1 - 10 秒范围内的随机秒数后打印它们。所有线程完成后，打印字符串“打印完成

首页

博学

6Ren·AI

商城

html - CSS HTML tfoot、tbody、thead 复杂样式