How to use nth-of-type with: before and targeting everything but the last element, or the last element targeted differently
I am using responsive css tricks table ( https://css-tricks.com/responsive-data-tables/ ) but wondering how to get rid of the last mobile view td "before".
Basically for this code that writes text to td for responsive view:
table td:nth-of-type(1)::before { content: "Expenses"; }
table td:nth-of-type(2)::before { content: "2015"; }
table td:nth-of-type(3)::before { content: "2016"; }
For the first line (which writes "Expenses" in the cell), how do I do this for everyone but the LAST cell? What happens is my last one is the "totals" row for this table, so I don't need the "td-content before" written before the last td (if that makes sense ... I'm also wondering if my table format needs customization, or I just need to deal with the totals line differently with all these flex tables - no clear example for the flex table CSS tricks with a totals row).
I've tried last-child, nth-last-of-type, etc., but no luck. Here's an example of what I've tried:
table td:nth-last-of-type(1)::before { content: " "; }
but it doesn't work. I read that you can combine pseudo-elements and psuedo classes ... I have tried combinations with: not also, display: no, and tried changing the HTML, but no luck. Maybe even write display none with jQuery up to the last td and add a class to display it later? I work in circles with this.
Can anyone help me?
thank!
UPDATE: Here is a JSFiddle showing this: https://jsfiddle.net/gamehendgeVA/vh7bjscy/
source to share
If I understand your question correctly, do you just want to remove the last "Expense" descriptor for the "total expenses" line? To do this, you need to target the last line first, and then its first td:
table tr:last-of-type td:nth-of-type(1)::before{content: "";}
table {border-collapse: collapse;width: 100%;color: #444;}
tr:nth-of-type(2n+1) {background: #eee none repeat scroll 0 0;}
th {background: #696969 none repeat scroll 0 0;color: #fff;font-weight: bold;}
td, th {border: 1px solid #ccc;padding: 6px;text-align: left; vertical-align: middle;}
/* responsive code */
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute; top: -9999px; left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;
}
/* Grants and Contracts table */
table td:nth-of-type(1)::before { content: "Expense"; }
table td:nth-of-type(2)::before { content: "2014"; }
table td:nth-of-type(3)::before { content: "2015"; }
table td:nth-of-type(4)::before { content: "2016"; }
table tr:last-of-type td:nth-of-type(1)::before {content: "";}
<table id="expenses">
<thead>
<tr><th>Expense</th><th>2014</th><th>2015</th><th>2016</th></tr>
</thead>
<tbody>
<tr><td>Salaries</td><td>$85,256</td><td>$65,487</td><td>$94,626</td></tr>
<tr><td>Publication costs</td><td>22,698</td><td>69,548</td><td>66,555</td></tr>
<tr><td><strong>Total Expenses</strong></td><td><strong>$126,061</strong></td><td><strong>$169,013</strong></td><td><strong>$65,887</strong></td></tr>
</tbody>
</table>
As discussed in the comments, I personally would prefer different labeling as tables break with the usual ltr reading paradigm, but of course to your liking.
The optimal / correct formatting (in my humble opinion) of your table would be as follows:
table {
border-collapse: collapse;
width: 100%;
color: #444;
}
tr:nth-of-type(2n+1) {
background: #eee none repeat scroll 0 0;
}
th {
background: #696969 none repeat scroll 0 0;
color: #fff;
font-weight: bold;
}
th span{float:right}
td, th {
border: 1px solid #ccc;
padding: 6px;
text-align: left;
vertical-align: middle;
}
/* responsive code */
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/* Grants and Contracts table */
table td:nth-of-type(1)::before { content: "2014"; }
table td:nth-of-type(2)::before { content: "2015"; }
table td:nth-of-type(3)::before { content: "2016"; }
<table id="expenses">
<thead>
<tr>
<th>Expense \ Year</th><th>2014</th><th>2015</th><th>2016</th>
</tr>
</thead>
<tbody>
<tr>
<th>Salaries</th><td>$85,256</td><td>$65,487</td><td>$94,626</td>
</tr>
<tr>
<th>Publication costs</th><td>22,698</td><td>69,548</td><td>66,555</td>
</tr>
<tr>
<th><strong>Total Expenses</strong></th><td><strong>$126,061</strong></td><td><strong>$169,013</strong></td><td><strong>$65,887</strong></td>
</tr>
</tbody>
</table>
source to share
As you would expect, you will be able to use
td:nth-last-child(1)::before {
content: "";
}
or, more succinctly,
td:last-child::before {
content: "";
}
This works in Chris Coyier's demo that accompanies the post you linked https://css-tricks.com/examples/ResponsiveTables/responsive.php (I added styles in my browser and they worked). If it doesn't work for you, you should introduce some additional conflicting style. For example, in a table < td
table td:nth-child(2) {content: ...}
will overridetd:nth-child(last) {content: ...}
To mark this line "total" just change the content you are using:
...
content: "Total";
...
source to share