CSS HTML样式，样式，thead复杂样式

时间：2018-11-15 19:13:19

标签： html css html5 css3 html-table

我可以在EXISTS的主要<thead>中使用<tbody>和<tfoot>内的<thead>吗？

我想在主要组件内部对主题进行不同的样式设置，但我不明白，为什么更高的专一性对某些<table>不起作用，而某些样式却在{{1 }}。

我想尝试不使用任何类。

这是一个简单的例子：

<tr>

这是最终效果，我希望获得： Expected look of table

3 个答案:

答案 0 :(得分：1)

<thead>

  

允许的内容：零个或多个<tr>元素。

     

允许的父母：<table>元素。

因此您的表结构应为：

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>

答案 1 :(得分：1)

将tad，tbody中的thead删除，仅使用tr和th并添加粉红色背景

注意：thead和tfoot元素只能在表格中使用一次。

    tbody > tr > th, tfoot > tr > th {background-color: skyblue !important; } /*0005 - to "Final students marks" and "Avarage marks in groups"*/

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

代码示例以供参考 

body {
    background-color: black;
    text-align: center;
    color: black;
}

table > thead   {background-color: pink;} /*0002 - to main thead*/   


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;}

tbody > tr > th, tfoot > tr > th {background-color: skyblue !important; } /*0005 - to "Final students marks" and "Avarage marks in groups"*/

tbody > tr > td:first-child, tfoot > tr > td:first-child {
  background-color: yellow
}
<head>
<title>Page Title</title>

</head>
<body>
<table>
					<thead> 
						<tr><th>Number</th><th>Name</th><th>Surname</th><th>Group</th><th>Mark</th></tr>
					</thead>
                    
					<tbody>
						<tr><th colspan="5">Final students marks</th></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><th colspan="5">Average marks in groups</th></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>

</body>

codepn-https://codepen.io/nagasai/pen/jQwWPm

答案 2 :(得分：1)

thead在tbody内部无效（是的，它们只是标签，但表来自不同时间且使用不同的浏览器规则）。您可以使用多个tbody标签对事物进行分组，并使用css:first-child对行进行正确着色。

body {
			background-color: black;
			text-align: center;
			color: black;
		}
thead {
	background-color: pink;
}

tbody > tr:nth-child(even) {
	background: #CCC;
}
tbody > tr:nth-child(odd) {
	background: #FFF;
}
/* remove important or other colors won't work */
/* just place AFTER other definition in CSS */
tbody:nth-child(3) tr {
	background: sandybrown;
}
/* place this after other definition to make everything blue */
tbody>tr:first-child {
	background: skyblue;
}
<!DOCTYPE html>
<html>

<head>
	<title>Page Title</title>
</head>

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

		<tbody>
				<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>
		</tbody>
	</table>

</body>

</html>

相关问题
最新问题