I have gridview (asp.NET) that populates automatically, and I use CSS to format it as a table. I need to set display:none for about the first six rows. I can do that with javascript, but is there an elegant way to do it with CSS? I tried:
#myTable td:eq(0)
which give me an error, and:
#myTable tr:nth-child(0) {display:none}
which doesn't error, but also doesn't work. If these worked, I could hide my columns one by one, but I have about seven or eight columns to hide. So I guess I have two questions, first, can I hide some columns but not others, and second, can I hide a range?
UPDATE, based Miak's answer. Here's the complete working solution:
#gvLoadStatus th:nth-child(-n+9) {
display: none;
}
#gvLoadStatus td:nth-child(-n+9) {
display: none;
}
To hide the first 6 rows you can use this: tr:nth-child(-n+6)
tr:nth-child(-n+6) {
display: none;
}
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>2</td>
</tr>
<tr>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>6</td>
<td>2</td>
</tr>
<tr>
<td>7</td>
<td>2</td>
</tr>
<tr>
<td>8</td>
<td>2</td>
</tr>
</table>
Related
Okay so i got a really specific css i need to set for the first 3 rows and only on the 2nd td of those 3 rows. is there anyway to target only them in css rules?
right now i am trying like this
here is the render
<tr className={getRowColor(props, l, i)}>
<td>{i + 1}</td>
<td className="info-table-cell{l.info}</td>
</tr>
and here it is the second td in this row that i want to target for the first 3 rows only. And right now i try like this
.info-table-cell td:nth-child(1) {
background-color: #FFF45E;
}
.info-table-cell td:nth-child(2) {
background-color: #DCDCDC;
}
.info-table-cell td:nth-child(3) {
background-color: #FFC933;
}
but that does nothing. Anyone who knows how to do this?
Hope this helps you. I have added a red background color for nd td of first 3 rows. Try it:
table {
width: 100%;
}
table tr td {
border: 1px solid #000;
}
table tr:first-child td:nth-child(2),
table tr:nth-child(2) td:nth-child(2),
table tr:nth-child(3) td:nth-child(2) {
background-color: red;
}
<table>
<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>
</table>
If i understand you correcly, its indeed possible. There are some problem with your code, your not selecting anything because info-table-cell is the td. Here is my approach:
Html
<table class="your-specific-class">
<tr>
<td class="info-table-cell">Content 1</td>
<td class="info-table-cell">Content 2</td>
</tr>
<tr>
<td class="info-table-cell">Content 1</td>
<td class="info-table-cell">Content 2</td>
</tr>
<tr>
<td class="info-table-cell">Content 1</td>
<td class="info-table-cell">Content 2</td>
</tr>
</table>
CSS
.your-specific-class tr:nth-child(1) td:nth-child(2){
background-color: #FFF45E;
}
.your-specific-class tr:nth-child(2) td:nth-child(2){
background-color: #DCDCDC;
}
.your-specific-class tr:nth-child(3) td:nth-child(2){
background-color: #FFC933;
}
Example here: https://codepen.io/lauritzz77/pen/XoLjXr
I do not understand how to use the two pseudo-classes. I want to change the black background to the row with cells 3,3,3.
tbody tr:not(:empty):first-of-type td {
background: black;
}
<table>
<tr>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
</tr>
</table>
Why is background not applicable?
Cells "3" are in the second to last row. To select that second to last row, you should use :nth-last-child() as in:
edit2: <nope tbody is created as an anonymous element by browsers so you can selecttbody somethingwithout any tbody in a table> As stated by #Esko in a comment to your question, you don't have a tbody element in your HTML code. You should then remove it from the selector. tr can only be found in a table so it's unnecessary to add table to the left of your selector (but you can).</nope>
Note 1: none of your tr is/are empty: they contain whitespace and thus are non-empty.
<tr></tr> and <tr><!-- some comment --></tr>: both empty
<tr> </tr>: NOT empty
Note 2: :first-of-type would, in your code select the very first tr, which is the one with no td inside (if it had td children, it'd still be the first of its type)
tr:nth-last-child(2) td {
background:black;
}
<table>
<tr>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
</tr>
</table>
The new value of position is very confusing to me.. a lot of search result give javascript/jQuery (JavaScript-framework) solutions.
In the example in bottom i have a table with a thead and tbody.
No matter what i cannot achieve the desire result.
Desire result is thead to be sticky to the table. sticky means when not in view the element is some kind of position:fixed fixed means it sticks to your screen. What i did try:
display: inline/block/inline-block;
th element position:sticky (th element is an element inside a tr witch is inside a thead element)
mix of display:inline/block etc; (values of property display)
I just cannot find how to achieve this sticky in firefox (supported)
Any solutions ??
(as position:sticky still an experimental API and should not be used in production site http://developer.mozilla.org/en/docs/Web/CSS/position )
table {
background-color: rgba(241, 31, 0, 0.3);
width: 100%;
}
thead {
background-color: rgba(241, 0, 241, 0.3);
position: -webkit-sticky;
position: sticky;
}
th {} tbody td:nth-child(2) {
height: 200px;
}
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
Firefox seems not to allow yet 'sticky' on table childs elements.
a workaround would be to set table as block, then thead, tbody, tfoot to display:table; so one of them can be sticked.
unfortunately this breaks the table-layout and split table into few tables .. :(
you also need to set coordonates where sticky comes in action http://codepen.io/gc-nomade/pen/reoExq . not the best :(
CSS base would be like:
table {
display: block;
}
thead {
position: sticky;
top: 0px; /* trigger sticky when reaches coordonates */
}
thead, tbody, tfoot {
display: table;
width: 100%;
}
table {
background-color: rgba(241, 31, 0, 0.3);
width: 100%;
margin-top: 1em;
position: static;
display: block;
}
thead {
display: table;
width: 100%;
background-color: rgba(241, 0, 241, 0.3);
position: sticky;
top: 0px;
/* trigger sticky when reaches coordonates */
}
tbody {
display: table;
width: 100%;
}
th {} tbody td:nth-child(2) {
height: 200px;
}
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
Another method is to use css3 to translate the header cells. This method does require javascript and will work in all modern browsers, but because it translates the table cell, the border does not get included for some reason (demo)
Also, this css is necessary to include a background color on the translated cells
thead th,
caption {
background: #fff;
}
jQuery
var $win = $(window),
$table = $('table'),
$thead = $table.children('thead'),
$tfoot = $table.children('tfoot'),
$caption = $table.children('caption'),
$cells = $thead.children().children().add($caption);
$win.on('scroll', function() {
var bottom = $table.position().top +
$table.height() -
$thead.height() -
($tfoot.height() || 0),
delta = $win.scrollTop() -
$thead.offset().top +
$caption.outerHeight(),
// include border thickness (minus 2)
vertPos = (delta < 0 || delta > bottom ? 0 : delta - 2);
$cells.css("transform", "translate(0px," + vertPos + "px)");
});
Update Q1 2018
position: sticky has now landed in stable Firefox 59. The fiddle linked below now works unchanged in Firefox as well.
I know you specifically asked for Firefox compatibility of position: sticky, but unfortunately its styling effect in Firefox is not defined on inner table elements:
Quoting from https://developer.mozilla.org/en/docs/Web/CSS/position
The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
The effect of ‘position: sticky’ on table elements is the same as for ‘position: relative’.
That being said, position: sticky is about to land in Chrome Stable channel (it is in Canary at the time of writing and there's a developer.google.com blog post about it). Their implementation does work fine on thead, solving my own long-standing problem of sticky theads as all other solutions fail when you need to resize the table/cell widths.
I've created a fiddle to test the sticky positioning. On all channels of Firefox, this has no effect.
My hope is that position: sticky now gains tractions due to the more complete implementation in Chrome, it will stir discussions again on the lacking inner table support of sticky.
There's also a bug report on Firefox' Bugzilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=975644
Using CSS, I want to format a table like this:
The most difficult part is to have a black background for all the cells over a long diagonal: the cells where <row nr> = <column nr> + 1 excluding the first row. I want to use the same CSS for different tables which are similar but with a different number of rows and columns.
Can this be done using CSS only? How?
fwiw, the table's HTML code:
<table>
<tr>
<td>#</td> <td>name</td>
<td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td>
<td>total</td> <td>//</td>
</tr>
<tr>
<td>1</td> <td>abc</td>
<td>X</td> <td>9</td> <td>11</td> <td>8</td> <td>10</td>
<td>38</td> <td>10</td>
</tr>
<tr>
<td>2</td> <td>defgh</td>
<td>7</td> <td>X</td> <td>8</td> <td>10</td> <td>10</td>
<td>35</td> <td>9</td>
</tr>
<tr>
<td>3</td> <td>ijk lmn</td>
<td>5</td> <td>8</td> <td>X</td> <td>9</td> <td>11</td>
<td>33</td> <td>9</td>
</tr>
<tr>
<td>4</td> <td>op qr st uv</td>
<td>8</td> <td>6</td> <td>7</td> <td>X</td> <td>12</td>
<td>33</td> <td>7</td>
</tr>
<tr>
<td>5</td> <td>wxyz</td>
<td>6</td> <td>6</td> <td>5</td> <td>4</td> <td>X</td>
<td>21</td> <td>5</td>
</tr>
</table>
The explicit way would be:
.diagonal tbody tr:nth-child(1) td:nth-child(3),
.diagonal tbody tr:nth-child(2) td:nth-child(4),
.diagonal tbody tr:nth-child(3) td:nth-child(5),
.diagonal tbody tr:nth-child(4) td:nth-child(6),
.diagonal tbody tr:nth-child(5) td:nth-child(7),
.diagonal tbody tr:nth-child(6) td:nth-child(8) {
background-color: black;
}
http://jsfiddle.net/9shebq2h/3/
And that can be extended to include the greatest width needed for your table with additional selectors (as the OP has already pointed out in a comment).
Assuming you go with SCSS, you can just do:
#for $i from 2 through 7 {
tr:nth-child($i) td:nth-child($i + 1) {
background-color: black;
}
}
SCSS works like a programming language. It saves you from writing copious amount of repetitive CSS. It needs a preprocessor, so you just need to find what fits within your tool chain.
Is it possible to apply a style to a column? for example lets say I want the 2nd column to be red (in reality it'd be more complicated). Below/this demo I gave the 2nd column the class b but I have no idea how to make the 2nd column of every row red. I only know how to style the header
.b { color: red; }
<table>
<th>a</th>
<th class="b">b</th>
<th>a</th>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/EEJfc/3/
Use nth-child selector.
In your case
table td:nth-child(2) { color: red }
Use nth-child
tbody tr td:nth-child(2){color: red;}
Demo JsFiddle