I would like to apply some styling only to the first TD of a TABLE with a specific class.
I am using:
.class td:first-child {
background-color: red;
}
But If there are nested TD they get styled too.
How can I apply this only to the first TD?
See JSfiddle here (I would like test1 to get red, but not test4)
Unless you want to use classes or something, you could use the direct child selector:
.pretty > tbody > tr > td:first-child {
background-color: red;
}
Child selector should work with the addition of the tr:first-child so your only selecting the first row also.
.pretty > tbody > tr:first-child > td:first-child {
background-color: red;
}
<table id="logtable" class="pretty">
<thead>
<tr>
<th>Time</th>
<th>From</th>
<th>To</th>
<th>Payload</th>
</tr>
</thead>
<tbody>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
<td>
<table>
<tr>
<td>test4</td>
<td>test5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
<td>
<table>
<tr>
<td>test4</td>
<td>test5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
<td>
<table>
<tr>
<td>test4</td>
<td>test5</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
You could use the child selector, >
.pretty > tbody > tr > td:first-child {
background-color: red;
}
.pretty > tbody > tr > td:first-child {
background-color: red;
}
<table id="logtable" class="pretty">
<thead>
<tr>
<th>Time</th>
<th>From</th>
<th>To</th>
<th>Payload</th>
</tr>
</thead>
<tbody>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
<td>
<table>
<tr>
<td>test4</td>
<td>test5</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
This should do the trick :
.pretty > * > tr > td:first-child {
background-color: red;
}
<table id="logtable" class="pretty">
<thead>
<tr>
<th>Time</th>
<th>From</th>
<th>To</th>
<th>Payload</th>
</tr>
</thead>
<tbody>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
<td>
<table>
<tr>
<td>test4</td>
<td>test5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
<td>
<table>
<tr>
<td>test4</td>
<td>test5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
<td>
<table>
<tr>
<td>test4</td>
<td>test5</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
See also this Fiddle.
Related
I have 2 tables with same class elements like:
/* and css to make number increases in Numbers List col */
.myTbl tbody {
counter-reset: rowNumber;
}
.myTbl tbody tr {
counter-increment: rowNumber;
}
.myTbl tbody tr td:nth-child(1)::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
<div class="tableRow">
<table class="myTbl">
<thead>
<tr>
<td>Numbers List</td>
<td>Content</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>A</td>
</tr>
<tr>
<td></td>
<td>B</td>
</tr>
<tr>
<td></td>
<td>C</td>
</tr>
</tbody>
</div>
<div class="tableRow">
<table class="myTbl">
<thead>
<tr>
<td>C</th>
<td>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</div>
I want the css only active in specific table like table 1 , but I'm having duplicate classes. How to do it?
And I cant affect the html table like change class or add id,... cause It's exported from other, only js or jquery to do it.
I tried adding ::nth-child(1) not working, is there a way same like eq() in js?
:first-child or nth-child(1) are actually work, you need to select from the parent
body .myTbl:first-child tbody {
counter-reset: rowNumber;
background: yellow
}
<table class="myTbl">
<thead>
<tr>
<td>Numbers List</td>
<td>Content</td>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
</tbody>
<table class="myTbl">
<thead>
<tr>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
First, you had unclosed tags.
Second, Using pseudo selectors is the key. But there is a difference between :first-child & :first-of-type.
/* and css to make number increases in Numbers List col */
.myTbl tbody {
counter-reset: rowNumber;
}
.myTbl tbody tr {
counter-increment: rowNumber;
}
/* OR :first-child */
.myTbl:first-of-type tbody tr:first-of-type td::before {
content: '•';
min-width: 1em;
margin-right: 0.5em;
}
<table class="myTbl">
<thead>
<tr>
<td>Numbers List</td>
<td>Content</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>A</td>
</tr>
<tr>
<td></td>
<td>B</td>
</tr>
<tr>
<td></td>
<td>C</td>
</tr>
</tbody>
</table>
<table class="myTbl">
<thead>
<tr>
<td>C</td>
<td>D</td>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
So I want to get a table just like the picture down below:
I used first-child and last-child selectors but they seem like they select all the first and last elements IDK why, here's what I got:
here's what I've tried:
<style>
table {
border: 1px solid #c4dcf3;
border-collapse: collapse;
}
table :first-child, table :last-child {
background-color: green;
}
table tbody:nth-child(odd) {
background-color: red;
}
</style>
<table>
<thead>
<tr>
<th>Country</th>
<th>OrderID</th>
<th>Order Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>1000</td>
<td>$1,300</td>
</tr>
<tr>
<td>USA</td>
<td>1001</td>
<td>$700</td>
</tr>
<tr>
<td>CA</td>
<td>1002</td>
<td>$2,000</td>
</tr>
<tr>
<td>CA</td>
<td>1003</td>
<td>$1,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td>$5,000</td>
</tr>
</tfoot>
</table>
:first-child and :last-child have to be placed on the child-elements. Since you threw it on tables, it looked for the first and last table in a set of table, which probably don't exist.
You can also target thead and tfoot for your desired styling, which might be more appropriate.
Same principle applies to the alternating highlighting. table > tbody > tr:nth-child(odd)
I added a working snippet.
<style>
table {
border: 1px solid #c4dcf3;
border-collapse: collapse;
}
thead,
tfoot {
background-color: green;
}
table > tbody > tr:nth-child(odd) {
background-color: red;
}
</style>
<table>
<thead>
<tr>
<th>Country</th>
<th>OrderID</th>
<th>Order Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>1000</td>
<td>$1,300</td>
</tr>
<tr>
<td>USA</td>
<td>1001</td>
<td>$700</td>
</tr>
<tr>
<td>CA</td>
<td>1002</td>
<td>$2,000</td>
</tr>
<tr>
<td>CA</td>
<td>1003</td>
<td>$1,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td>$5,000</td>
</tr>
</tfoot>
</table>
Don't target 1st / last child when you can simply target thead and tfoot
Also your code doesn't work because it should be:
table>*:first-child ,
table>*:last-child {
background-color: green;
}
without space
You need to apply color on tr and make changes according to parent as you are using thead, tbody, tfoot. Your css not apply properly because you are using table tag there. table has 3 child thead, tbody, tfoot and each have their separate tr tags as first child and last child.
<style>
table {
border: 1px solid #c4dcf3;
border-collapse: collapse;
}
thead tr, tfoot tr{
background-color: green;
}
tbody tr:nth-child(odd) {
background-color: red;
}
</style>
<table>
<thead>
<tr>
<th>Country</th>
<th>OrderID</th>
<th>Order Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>1000</td>
<td>$1,300</td>
</tr>
<tr>
<td>USA</td>
<td>1001</td>
<td>$700</td>
</tr>
<tr>
<td>CA</td>
<td>1002</td>
<td>$2,000</td>
</tr>
<tr>
<td>CA</td>
<td>1003</td>
<td>$1,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td>$5,000</td>
</tr>
</tfoot>
</table>
table {
border: 1px solid #c4dcf3;
border-collapse: collapse;
}
thead,
tfoot {
background-color: #4e81e7;
}
tr:nth-child(even) {background-color: #f2f2f2;}
<table>
<thead>
<tr>
<th>Country</th>
<th>OrderID</th>
<th>Order Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>1000</td>
<td>$1,300</td>
</tr>
<tr>
<td>USA</td>
<td>1001</td>
<td>$700</td>
</tr>
<tr>
<td>CA</td>
<td>1002</td>
<td>$2,000</td>
</tr>
<tr>
<td>CA</td>
<td>1003</td>
<td>$1,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td>$5,000</td>
</tr>
</tfoot>
</table>
Hi im a beginner in css i have these table below its 3 separate table and i would like to make all of the table column height equal is there any easy method to go about this? Any suggestion would be greatly appreciated thank you!
Here is my JSFiddle
<body>
<div class="center">
<table class="fruitsTable class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Apples</td>
</tr>
<tr>
<td>Grapes</td>
</tr>
<tr>
<td>Oranges</td>
</tr>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
<table class="fruitsTable2 class" >
<thead>
<th>Fruits</th>
</thead>
<tbody >
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
it's possible when a table change by CSS, but it's not good,
You can try this code here https://jsfiddle.net/10t4gv92/21/ Or
.fontcolor {
color: #25BAD0;
}
.center {
display: flex;
justify-content: center
}
.class {
font-family: Open Sans;
}
table,
table tr,
table tr td,
table tr th {
border-collapse: collapse;
}
table {
display: block;
width: 25%;
border:1px solid #25BAD0;
}
table tr,
table th,
table tr td,
table tbody,
table thead {
display:block;
width: 100%;
}
th {
width:100%;
color: #0080ff;
font-weight: normal;
border-bottom: 1px solid #25BAD0;
}
td {
width: 100%;
padding-top: 5px;
padding-left: 8px;
}
.fruitsTable th { width:100%; }
<div class="center">
<table class="fruitsTable class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Apples</td>
</tr>
<tr>
<td>Grapes</td>
</tr>
<tr>
<td>Oranges</td>
</tr>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
<table class="fruitsTable2 class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Papaya</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
<table class="fruitsTable3 class">
<thead>
<th>Fruits</th>
</thead>
<tbody>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>Kiwi</td>
</tr>
</tbody>
</table>
</div>
I have the code below:
tbody > tr:hover{
background-color: lightgrey;
cursor: pointer;
}
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">January</td>
<td>Week 1</td>
<td >$150</td>
</tr>
<tr>
<td>Week 3</td>
<td>$100</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>Week 2</td>
<td >$50</td>
</tr>
<tr>
<td>Week 1</td>
<td>$80</td>
</tr>
</tbody>
</table>
How can I highlight the whole row when I hover to the row.
For example, when I hover to January, it should highlight the whole January row instead of highlight only the half one because of the rowspan attribute.
Move the styling to the td under the hovered tr. In addition, highlight the sibling row, when the 1st row is hovered. The only caveat is that if the 2nd tr is hovered, it won't highlight the 1st cell.
tr:hover > td {
background-color: lightgrey;
cursor: pointer;
}
tr:nth-child(2n + 1):hover + tr {
background-color: lightgrey;
}
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">January</td>
<td>Week 1</td>
<td>$150</td>
</tr>
<tr>
<td>Week 3</td>
<td>$100</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>Week 2</td>
<td>$50</td>
</tr>
<tr>
<td>Week 1</td>
<td>$80</td>
</tr>
</tbody>
</table>
tr:hover td:not([rowspan]) {background: red;}
tr:hover td[rowspan]:hover ~ td {background: none;}
tr:hover td[rowspan]:hover {background: yellow;}
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">January</td>
<td>Week 1</td>
<td >$150</td>
</tr>
<tr>
<td>Week 3</td>
<td>$100</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>Week 2</td>
<td >$50</td>
</tr>
<tr>
<td>Week 1</td>
<td>$80</td>
</tr>
</tbody>
</table>
How can I make the table header appear on the left side of the table as a column instead on the top as a row? I have this markup:
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
Just use <th> as the first element in the row. Then add the scope attribute, which has no visual impact, but you could use it e.g. in CSS.
<table>
<tbody>
<tr>
<th scope="row">A</th>
<td>b</td>
</tr>
<tr>
<th scope="row">C</th>
<td>d</td>
</tr>
</tbody>
</table>
See also http://www.w3.org/TR/WCAG20-TECHS/H63
How's this?
Example
CSS
thead {
float: left;
}
thead th {
display: block;
}
tbody {
float: right;
}
jsFiddle.
Update
Well, the 1, 2 should also be as column, obviously.
jsFiddle.
It also looks like IE baulks at this. You may have to trade semantic-ness for cross browser compatibility.
You can see the result here. You mean like this?
<table border="1">
<thead>
<tr>
<th></th>
<th colspan="2">Letters</th>
</tr>
<tr>
<th></th>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Numbers</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>
You usually use rowspan and colspan for cells spanning multiple columns/rows.
I needed something a little different, but the answers by #alex and #marion got me started in the right direction. The problem was that when you needed many items in the table, the "columns" started stacking funny on smaller screens.
Thanks to Serge for his answer here that led me in this solution. This solution allows for scrolling horizontally and doesn't stack funny regardless of the size of the screen/window. I tested it in Chrome, Firefox, Opera, Edge, and IE11. Here's the fiddle with the correct alignment for the new "rows" and "columns": https://jsfiddle.net/berrym/6r3zvaef/21/
And just in case it disappears from JSFiddle:
<style>
table{
display:block;
white-space:nowrap;
width:100%;
}
td, th {
border-bottom: 1px solid red;
border-collapse: collapse;
}
thead {
float: left;
background: yellow;
width: 10%;
}
thead tr {
width:100%;
float:left;
}
thead th {
display: block;
}
tbody {
float: left;
width: 90%;
}
tbody tr {
display: inline-block;
}
tbody td {
float:left;
width:100%;
}
</style>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
</tbody>
</table>
This worked perfectly for me : (inspired from the first answer)
Example here
html :
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
</tbody>
</table>
css :
table, td, th {
border: 1px solid red;
}
thead {
float: left;
}
thead th {
display: block;
background: yellow;
}
tbody {
float: left;
}
tbody tr {
display: block;
float: left;
}
tbody td {
display: block;
}
If you use bootstrap, you can achieve this easily with the table-reflow style: http://v4-alpha.getbootstrap.com/content/tables/#reflow