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;
}
Related
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>
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 tried to create html tables with header.
I added 2 rows but I couldn't figure out how to align to header.
My desired result is like this.
below is my previous work.
What is wrong point? how can I fix it? if someone has opinion please let me know.
Thanks
td {
padding:5px;
border:solid black 1px;}
table{
border-collapse:collapse;
border:solid black 1px;}
<table>
<tr>
<th>header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
I hope this will help you:
td {
padding:5px;
border:solid black 1px;}
table{
border-collapse:collapse;
border:solid black 1px;}
<table>
<tr>
<th rowspan="2">header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
You have to use rowspan="2" since you want to merge 2 rows.
td {
padding: 5px;
border: solid black 1px;
}
table {
border-collapse: collapse;
border: solid black 1px;
}
<table>
<tr>
<th rowspan="2">header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
Please find attached the solution:
<table>
<tr>
<td rowspan="2"> Header</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</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/
As you might know, position: sticky; has landed in Webkit (demo).
So far I can see this only works within the parent element. But I'd like to know if I can use this in a scrolling div with a table.
So it needs to 'listen' on the scrolling event of the div, not the table.
I know I can do this with javascript and absolute positioning, but I was wondering if the sticky-positioning would support this.
Position sticky on thead th works in 2018!
In your stylesheets just add this one line:
thead th { position: sticky; top: 0; }
Your table will need to include thead and th for this to style.
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
</tr>
</thead>
<tbody>
// your body code
</tbody>
</table>
Also, if you have multiple rows in thead, you can select the first one to remain sticky:
thead tr:first-child th { position: sticky; top: 0; }
As of March 2018 support is pretty much there across modern browsers
ref: https://caniuse.com/#feat=css-sticky
Credit goes to #ctf0 for this one (ref comment made 3 Dec 2017)
If you need sticky header for chrome only then you can set position: sticky; top: some_value (top property is mandatory) for td element in a thead element.
See:
<table border=1>
<thead>
<tr>
<td style='position: sticky; top: -1px;background: red'>Sticky Column</td>
<td>Simple column</td>
</tr>
</thead>
table with a stiky header
position: sticky doesn't work with table elements (as long as their display attribute starts with table-) since tables are not part of specification:
Other kinds of layout, such as tables, "floating" boxes, ruby annotations, grid layouts, columns and basic handling of normal "flow" content, are described in other modules.
Edit: As Jul 2019 according to https://caniuse.com/#feat=css-sticky Firefox supports this feature and Chrome has at least support for <th> tag.
As it turns out it position: sticky only works in the window and not in a scrolling div.
I created a test-case with a very long table with a table header:
h1 {
font-size: 18px;
font-weight: bold;
margin: 10px 0;
}
div.testTable {
height: 200px;
overflow: auto;
}
table.stickyHead thead {
position: -webkit-sticky;
top: 0px;
background: grey;
}
table.stickyHead td,
table.stickyHead th {
padding: 2px 3px;
}
<h1>Position sticky</h1>
<div class="testTable">
<table class="stickyHead">
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
As you can see, if you remove the overflow from the wrapper and make your window not so tall, the table-head is sticking to the top of the window. I doesn't apply to the wrapping div even if you make give the div position: relative
Caution:
position:sticky doesn't work anymore on Google Chrome in 2019, try to use fixed instead or display:inline-block
Setting the position:sticky for the thead is enough, no need to set it for th :
table.StickyHeader thead {
position: sticky;
top: 0px;
}
Tested in:
Edge 105.0.1343.42 ,
Firefox 105.0 ,
Chrome 105.0.5195.127 ,
Opera 91.0.4516.16
But, Firefox can not render borders of th when position of thead is set to sticky and th has background-color:
table.StickyHeader th {
border: 1px solid black;
padding: 5px;
background-color: gold;
text-align: center;
}
Firefox
Edge, Chrome, Opera