I have a table:
<table>
<thead>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>row 1</td>
<td class="editable">value 1</td>
<td class="editable">value 2</td>
</tr>
<tr>
<td>row 2</td>
<td class="editable">value 1</td>
<td class="editable">value 2</td>
</tr>
<tr>
<td>row 3</td>
<td class="editable">value 1</td>
<td class="editable">value 2</td>
</tr>
<tr>
<td>row 4</td>
<td class="editable">value 1</td>
<td class="editable">value 2</td>
</tr>
<tr>
<td>row 5</td>
<td class="editable">value 1</td>
<td class="editable">value 2</td>
</tr>
</tbody>
</table>
How can I select (using only CSS selectors) only one element from td.editable? Analog of jQuery :first selector will be acceptable.
You could use an n-th child selector. Use one to get at the exact table row that you want, then use a second n-th child to get at the exact <td> element you want.
For example if I wanted the second row, and the second <td> element with a class="editable" I could do this:
tr:nth-child(2) > td.editable:nth-child(2)
On compatible browsers, you can use the :nth-child pseudo-class
Is this your only table of td.editable's? Try something like this...
td.editable:nth-child(2) //or 3 or 4, etc...
Not sure this is what you want but try this:
table > tbody > tr > td:nth-child(2) {
color: red;
}
Demo
Related
I have a page with several tables on it. To improve readability the body of each table is collapsed, so the user just sees the header and the footer. There is a button to toggle it to expand.
In IE and Firefox, it works great. But in Chrome and Safari, there is white space in the place of the collapsed row. Is there a workaround for those two browsers that will remove the white space?
Here is example code:
.collapse {
visibility: collapse;
}
<table>
<caption>This is a Table</caption>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody class='collapse'>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL 1</td>
<td>TOTAL 2</td>
</tr>
</tfoot>
</table>
Chrome and Safari treat visibility: collapse as visibility: hidden.
This will only work in Firefox/IE.
You can change it to display: none to make sure it works the same in all browsers, however this way you will miss the general idea of the collapse value, where all the width/height of the table's elements are calculated and take into account while affecting other elements in the table:
.collapse {
display: none;
}
<table>
<caption>This is a Table</caption>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody class='collapse'>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL 1</td>
<td>TOTAL 2</td>
</tr>
</tfoot>
</table>
I know I could do this easily by specifying an id but I want to practice with pseudo selectors.
I have two tables within a view. Using pseudo selectors:
I want to grab the first table only.
within that first table's <tbody>
I want to grab the first <tr> and color all the text red.
My current implementation almost works. The issue is that it does this styling for every table in the view. I want this styling to happen only for the first table.
tbody tr:first-child {
color: red;
}
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T1 R1 Col 1</td>
<td>This row should all be red</td>
</tr>
<tr>
<td>T1 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T2 R1 Col 1</td>
<td>This row should NOT be red</td>
</tr>
<tr>
<td>T2 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
Use another pseudo selector for the table:
table:nth-of-type(1) tbody tr:first-child {
color: red;
}
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T1 R1 Col 1</td>
<td>This row should all be red</td>
</tr>
<tr>
<td>T1 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T2 R1 Col 1</td>
<td>This row should NOT be red</td>
</tr>
<tr>
<td>T2 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
You could take it a step further with the pseudo selectors since you already know you're targeting the first table and use :first-of-type which works similarly as :nth-of-type(1)
table:first-of-type tbody tr:first-child {
color: red;
}
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T1 R1 Col 1</td>
<td>This row should all be red</td>
</tr>
<tr>
<td>T1 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T2 R1 Col 1</td>
<td>This row should NOT be red</td>
</tr>
<tr>
<td>T2 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
Wrap the tables in a container element and then apply this CSS
.container > :first-child tr:first-child td:last-child {
color: red;
}
<div class="container">
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T1 R1 Col 1</td>
<td>This row should all be red</td>
</tr>
<tr>
<td>T1 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T2 R1 Col 1</td>
<td>This row should NOT be red</td>
</tr>
<tr>
<td>T2 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
</div>
Note: This will apply the CSS to the first table in every .container element. Just specify an ID instead and it shouldn't be a problem
So this is targeted toward IE 10 and 11 and I'm also using Bootstrap 3.
If I have a desktop monitor, I'd like my table to have this layout:
<table class="table table-responsive">
<thead>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
On a phone (or similar device), I'd like to have the layout like this:
<table class="table table-responsive">
<thead>
<tr>
<td>Header</td>
<td>Data</td>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td>Header 1</td>
<td>Data 1</td>
</tr>
<tr>
<td>Header 2</td>
<td>Data 2</td>
</tr>
<tr>
<td>Header 3</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
Is there some or CSS that will allow me to do this? Or can this only be done with javascript (and css)?
To be clear, I want the code to detect the resolution and display one of the two layouts.
You can create two tables and use css media queries to toggle between the two, see fiddle https://jsfiddle.net/5f3pbg8b/17/
.table.mobile {
display: none
}
.table.desktop {
display: inline
}
#media (max-width: 600px) {
.table.desktop {
display: none
}
.table.mobile {
display: inline
}
}
I'm trying to apply a css only zebra stripe style to a table, but only if it has more than 2 rows.
Is this possible with css only? IE9 and upwards is required - so good to go for all css3 selectors.
So far this is what I came up with, but I'm not quite there...
Should have Zebra:
<div class="select">
<table>
<tr class="clickable">
<td>row 1</td>
</tr>
<tr class="clickable">
<td>row 2</td>
</tr>
<tr class="clickable">
<td>row 3</td>
</tr>
<tr class="clickable">
<td>row 4</td>
</tr>
<tr class="clickable">
<td>row 5</td>
</tr>
<tr class="clickable">
<td>row 6</td>
</tr>
</table>
</div>
<hr>
Should have Zebra:
<div class="select">
<table>
<tr class="clickable">
<td>row 1</td>
</tr>
<tr class="clickable">
<td>row 2</td>
</tr>
<tr class="clickable">
<td>row 3</td>
</tr>
</table>
</div>
<hr> Since only 2 elements: shouldnt have Zebra
<div class="select">
<table>
<tr class="clickable">
<td>row 1a</td>
</tr>
<tr class="clickable">
<td>row 2a</td>
</tr>
</table>
</div>
CSS:
.clickable:nth-child(odd):not(:nth-last-child(2)) {
background: rgba(230, 230, 230, 1);
color: red;
}
.clickable:nth-child(even):not(:nth-last-child(1)) {
background: rgba(180, 180, 180, 1);
}
http://codepen.io/anon/pen/zqEWYO
You can use CSS Quantity Queries.
Simply add:
.clickable:only-child,
.clickable:nth-last-child(2):first-child,
.clickable:nth-last-child(2):first-child ~ .clickable {
background: none;
}
Example on Codepen
Or you can apply styles only when there 3+ elements:
Example on Codepen
You can also select (increasing selector weight meantime):
/* single tr being first and last */
table tr.clickable:nth-child(odd):first-child:last-child ,
/* last being right after first */
table tr.clickable:nth-child(odd):first-child + tr.clickable:nth-child(even):last-child ,
/* first being right before last */
table tr.clickable:nth-child(odd):first-child:nth-last-child(2) {
background:none;
color:gray;
}
codepen fork
table tr.clickable:nth-child(odd) {
background: rgba(230, 230, 230, 1);
color: red;
}
table tr.clickable:nth-child(even) {
background: rgba(180, 180, 180, 1);
}
table tr.clickable:nth-child(odd):first-child:last-child,
table tr.clickable:nth-child(odd):first-child + tr.clickable:nth-child(even):last-child,
table tr.clickable:nth-child(odd):first-child:nth-last-child(2) {
background:none;
color:gray;
}
Should have Zebra:
<div class="select">
<table>
<tr class="clickable">
<td>row 1</td>
</tr>
<tr class="clickable">
<td>row 2</td>
</tr>
<tr class="clickable">
<td>row 3</td>
</tr>
<tr class="clickable">
<td>row 4</td>
</tr>
<tr class="clickable">
<td>row 5</td>
</tr>
<tr class="clickable">
<td>row 6</td>
</tr>
</table>
</div>
<hr>
Should have Zebra:
<div class="select">
<table>
<tr class="clickable">
<td>row 1</td>
</tr>
<tr class="clickable">
<td>row 2</td>
</tr>
<tr class="clickable">
<td>row 3</td>
</tr>
</table>
</div>
<hr> Since only 2 elements: shouldnt have Zebra
<div class="select">
<table>
<tr class="clickable">
<td>row 1a</td>
</tr>
<tr class="clickable">
<td>row 2a</td>
</tr>
</table>
</div>
<hr> Since only 1 element: shouldnt have Zebra Css rules
<div class="select">
<table>
<tr class="clickable">
<td>row 1a</td>
</tr>
</table>
</div>
This question already has answers here:
Alternate table row color using CSS?
(11 answers)
Closed 6 years ago.
I have a table with class table. The only styling so far is the table th. I'd like to use a CSS value to alternate between white and silver for the rows, and hover silver for the entire row. Does anyone have the code for that?
<table class='table'>
<tr>
<th>heading</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
<tr class='table'>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr class='table'>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr class='table'>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>
That is the html example (as it's written in php)
CSS
.table {
background-color: #FFFFFF;
color: #000000;
}
.table th {
background-color: #333333;
color: #FFFFFF;
}
That's it so far. Looking for the values to use for I'm guessing the table tr css.
Saying different because even/odd doesn't work & it's dynamic php not strict html.
If you've already set the background color of your table to white, you just need to set the alternate row and hover backgrounds, like so:
.table tr {
transition: background 0.2s ease-in;
}
.table tr:nth-child(odd) {
background: silver;
}
.table tr:hover {
background: silver;
cursor: pointer;
}
Additionally, you probably don't need to repeat the table class on each row, FWIW. You can just target those rows using .table tr as I have done. If you're trying to make sure the table header and body styles don't interfere with each other, it's more semantic and just cleaner to wrap those elements in a thead and tbody:
<table class='table'>
<thead>
<tr>
<th>heading</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</tbody>
</table>
You can achieve this with a little bit css, just use the n-th child selector, like this:
HTML:
<table class="alternate">
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
<tr>
<td>Row Col 1 </td>
<td>Row Col 2 </td>
</tr>
</table>
CSS:
.alternate tr:nth-child(2n) {
background-color: silver;
}
.alternate tr {
background-color: white;
}
.alternate tr:nth-child(2n):hover, .alternate tr:hover {
background-color: grey;
}
And here is a working fiddle, I hope that is what you were looking for.