CSS HTML tfoot, tbody, thead сложный стиль - PullRequest
Новая
       5

CSS HTML tfoot, tbody, thead сложный стиль

0 голосов
/ 15 ноября 2018

Могу ли я использовать <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>

Это последний эффект, который я бы хотел получить: Expected look of table

Ответы [ 3 ]

0 голосов
/ 15 ноября 2018

Удалите thead внутри tfoot, tbody и используйте только 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

0 голосов
/ 15 ноября 2018

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>
0 голосов
/ 15 ноября 2018

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...