So I need to split my column table like this
in the middle we got a split by rows it I can do by colspan: 1; but how can I split it by column at the same time
This is how you do it
table td,
table th{
border: 1px solid #ccc;
padding:10px
}
<table>
<thead>
<tr>
<th rowspan="2">Head</th>
<th colspan="2">Split Head </th>
<th rowspan="2">Head</th>
</tr>
<tr>
<th>asd</th>
<th>asd</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
Related
I am working on a table that is optimized with Bootstrap and I encounter the following problem I want column 1 both header and body to have font size 12px then column number 2 both header and body to have font size 21px.
In other words, I want to customize the font as I want for each column.
Code:
<table class="table">
<thead>
<tr>
<th style="font-size: 12px;">1</th>
<th style="font-size: 21px;">2</th>
<th style="font-size: 12px;">3</th>
<th style="font-size: 21px;">4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
You need to use nth-child/nth-of-type and if you want a zebra style (column-based) you can use odd and even
/*one approach */
.table th:first-child,
.table td:first-child {
font-size: 21px
}
.table th:nth-child(2),
.table td:nth-child(2) {
font-size: 12px
}
/*second approach */
/* odd */
.table th:nth-child(2n+1),
.table td:nth-child(2n+1) {
background: red
}
/* even */
.table th:nth-child(2n),
.table td:nth-child(2n) {
background: lightblue
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<table class="table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
you can also use odd and even keywords with nth-child:
th:nth-child(odd),
td:nth-child(odd){
font-size: 12px;
}
th:nth-child(even),
td:nth-child(even){
font-size: 21px;
}
<table class="table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
Easily with CSS nth-child you can target what ever child you want, see below:
td:nth-child(1),
td:nth-child(3),
th:nth-child(1),
th:nth-child(3){
font-size: 12px
}
td:nth-child(2),
td:nth-child(4),
th:nth-child(2),
th:nth-child(4){
font-size: 21px
}
<table class="table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
Check MDN Web Docs for more about nth-child
I want to create a table using rowspan and colspan and it is almost done. only the issue is in last tr. I don't know why but it is not picking the rowspan in last tr.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
<table style="width:50%">
<tr>
<td height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="3" colspan="2">a</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
As you can see in result I want to merge the last blank td with a.
This is the result I want:
You should put the first set of cells with 3, 4, 5 after the td with the row+colspan.
And omit the empty cells from the last row.
Result:
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<table style="width:50%">
<tr>
<td width="20%" height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="3" colspan="2">a</td>
<td width="20%">3</td>
<td width="20%">4</td>
<td width="20%">5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
Note that the second column never has content of its own, it is always part of a colspan set. That would normally make the second column collapse on most if not all browsers, and that is why the cell width is being set.
This is simply an error in counting. rowspan="3" means it spans three rows.
First row
<tr>
<td rowspan="3" colspan="2">a</td>
</tr>
Second row
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
Third row
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
Fourth row … so it doesn't span it.
<tr>
<td></td>
<td></td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
(You should omit the empty cells from the final row too).
try this:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
<table style="width:50%">
<tr>
<td height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="3" colspan="2">a</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<tr style="visibility:hidden">
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tr>
</table>
In order to keep the overlapping of the cells as you stated, you need to use an "invisible" row for reference. I'm not aware of any other way to achieve this, as colspan and rowspan need actual cells as a reference.
Here's an updated version of your example that works that way. Had to change the CSS a bit as well to prevent double borders around the hidden cells.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
.reference,
.reference td {
padding: 0px 5px;
height: 0px;
line-height: 0px;
border: 0 none;
}
<table style="width:50%">
<tr>
<td height="75px">1</td>
<td colspan="4" height="75px">2</td>
</tr>
<tr>
<td rowspan="4" colspan="2">a</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="reference">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
So I had an assignment but I cant really make such table:
You have to use rowspan and colspan to merge cells
<table>
<tr>
<th rowspan="2">Name<br></th>
<th rowspan="2">Course</th>
<th colspan="2">hours<br></th>
</tr>
<tr>
<td>credit</td>
<td>contact</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>cc</td>
<td>dd</td>
<td>3</td>
<td>4</td>
</tr>
</table>
Is there a way to color spans of columns all the way down. See, starting example below:
<table border="1">
<tr>
<th>Motor</th>
<th colspan="3">Engine</th>
<th>Car</th>
<th colspan="2">Body</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
And I am looking for a better way (less code, non-individual coloring) to color, for example, "Engine" and "Body" spans, including all the cells underneath them in #DDD
<style>
.color {
background-color: #DDD
}
</style>
<table border="1">
<tr>
<th>Motor</th>
<th colspan="3" class="color">Engine</th>
<th>Car</th>
<th colspan="2" class="color">Body</th>
</tr>
<tr>
<td>1</td>
<td class="color">2</td>
<td class="color">3</td>
<td class="color">4</td>
<td>5</td>
<td class="color">6</td>
<td class="color">7</td>
</tr>
<tr>
<td>7</td>
<td class="color">1</td>
<td class="color">2</td>
<td class="color">3</td>
<td>4</td>
<td class="color">5</td>
<td class="color">6</td>
</tr>
</table>
Yes, you can... using the <col> element:
.grey {
background-color: rgba(128,128,128,.25);
}
.red {
background-color: rgba(255,0,0,.25);
}
.blue {
background-color: rgba(0,0,255,.25);
}
<table>
<colgroup>
<col class="grey" />
<col class="red" span="3" />
<col class="blue" />
</colgroup>
<thead>
<tr>
<th>#</th>
<th colspan="3">color 1</th>
<th>color 2</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>red</td>
<td>red</td>
<td>red</td>
<td>blue</td>
</tr>
<tr>
<th>2</th>
<td>red</td>
<td>red</td>
<td>red</td>
<td>blue</td>
</tr>
</tbody>
</table>
Note: You can use the span attribute to make the col definition apply to more than one column.
See also: <colgroup>
You can use the nth-child selector for that:
tr td:nth-child(2),
tr td:nth-child(3) {
background: #ccc;
}
<table>
<tr>
<th colspan="2">headline 1</th>
<th>headline 2</th>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
</table>
It is generally simplest to style cells (by column if desired), but columns can be styled, in different ways. One simple way is to wrap columns in a colgroup element and set styles on it. Example:
<style>
.x {
background-color: #DDD
}
</style>
<table border="1">
<col>
<colgroup class=x>
<col>
<col>
<col>
</colgroup>
<col>
<colgroup class=x>
<col>
<col>
</colgroup>
<tr>
<th>Motor</th>
<th colspan="3" class="color">Engine</th>
<th>Car</th>
<th colspan="2" class="color">Body</th>
</tr>
<tr>
<td>1</td>
<td class="color">2</td>
<td class="color">3</td>
<td class="color">4</td>
<td>5</td>
<td class="color">6</td>
<td class="color">7</td>
</tr>
<tr>
<td>7</td>
<td class="color">1</td>
<td class="color">2</td>
<td class="color">3</td>
<td>4</td>
<td class="color">5</td>
<td class="color">6</td>
</tr>
</table>
I would use the nth-child css pseudo-class for this:
tr td:nth-child(2), tr th:nth-child(2), tr td:nth-child(3), tr td:nth-child(4), tr th:nth-child(4), tr td:nth-child(6), tr td:nth-child(7){
background-color: #DDD;
}
tr td:nth-child(2),
tr th:nth-child(2),
tr td:nth-child(3),
tr td:nth-child(4),
tr th:nth-child(4),
tr td:nth-child(6),
tr td:nth-child(7) {
background-color: #DDD;
}
<table border="1">
<tr>
<th>Motor</th>
<th colspan="3">Engine</th>
<th>Car</th>
<th colspan="2">Body</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
You can use CSS3:
http://jsfiddle.net/snuggles08/bm98g8v8/
<style>
.table td:nth-of-type(1) {
background: red;
}
.table td:nth-of-type(5) {
background: blue;
}
.table td:nth-of-type(3) {
background: green;
}
.table td:nth-of-type(7) {
background: lime;
}
.table td:nth-of-type(2) {
background: skyblue;
}
.table td:nth-of-type(4) {
background: darkred;
}
.table td:nth-of-type(6) {
background: navy;
}
</style>
Styled table:
<table border="1" class="table">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
<hr>Unstyled table:
<table border="1" class="table2">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
The following implement's the nth-child selector and should work...
<style type="text/css">
th:nth-child(2),
th:nth-child(4)
{
background-color: rgba(255, 0, 0, 1.0);
}
td:nth-child(2),
td:nth-child(3),
td:nth-child(4),
td:nth-child(6),
td:nth-child(7)
{
background-color: rgba(255, 0, 0, 0.5);
}
</style>
My version using nth-child expressions:
Using the CSS concept of cascade rules to first coloring the cells and then to uncolor the ones i want to be transparent. The first selector selects all the cells after the first one, and the second one selects the fifth cell to be transparent.
<style type="text/css">
/* colored */
td:nth-child(n+2) { background-color: #ddd }
/* uncolored */
td:nth-child(5) { background-color: transparent }
</style>
<table border="1">
<tr>
<th>Motor</th>
<th colspan="3">Engine</th>
<th>Car</th>
<th colspan="2">Body</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Check this interesting reference:
http://learn.shayhowe.com/advanced-html-css/complex-selectors/
This is an old question with a lot of great answers. Just wanted to add the -n and nth-last-child selectors that haven't yet been mentioned. They're helpful when applying CSS to multiple columns but may not know the number of columns prior to styling, or have multiple tables with varying widths.
/* Select the first two */
table tr td:nth-child(-n + 2) {
background-color: lightblue;
}
/* Select all but the first two */
table tr td:not(:nth-child(-n + 2)) {
background-color:lightgreen;
}
/* Select last two only */
table tr td:nth-last-child(-n + 2) {
background-color:mistyrose;
}
/* Select all but the last two */
table tr td:not(:nth-last-child(-n + 2)) {
background-color:yellow;
}
jsFiddle: https://jsfiddle.net/3rpf5oht/2/
I'd like to right align the text of last two columns of a table.
<table>
<tr>
<th>H 1</th>
<th>H 2</th>
<th>H 3</th>
<th>H 4</th>
</tr>
<tr>
<td rowspan='3'>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
There is not the same number of columns in each row and I'm not sure how to use css:nth-child to select the last two td items in each row.
http://jsfiddle.net/BB9ty/
th:last-child,
td:last-child,
th:nth-last-child(2),
td:nth-last-child(2) {
text-align: right;
}