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.
Related
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>
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>
This is my table and i like to select all td-s that contains a link.
This selector select all links in td, but i like to style td not link:
#wp-calendar > tbody > tr > td > a:link
My html table:
<table id="wp-calendar">
<tbody>
<tr>
<td colspan="5" class="pad"> </td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td><td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td><td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</tbody>
</table>
You cannot select an element in CSS based on its children or contents (other than whether its contents are :empty)
You will need to resort to using Javascript, e.g. in jQuery this can be done via, e.g. :has
$( "td:has(a)" )
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