I have a table with some <td>s, and a couple of them have rowspan attribute. I'm trying to select the very last one in the table, neither last-child nor last-of-type works.
Here is a jsfiddle: https://jsfiddle.net/p2cjwvj5/
<table class='myTable' border='1'>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td rowspan='3'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</table>
.myTable [rowspan]:last-of-type {
color: red;
}
I'm trying to to select the cell that contains "HEADER2".
Is this possible? I know I can work around it by tagging the last rowspan with another class, just wonder if there is a cleaner method. Thanks!
You can wrap each group of <tr>s into a <tbody>, then select the last tbody by either using :last-of-type or :last-child would be fine.
.myTable tbody:last-of-type td[rowspan] {
color: red;
}
<table class='myTable' border='1'>
<tbody>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan='3'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</tbody>
</table>
If you don't want to add more <tbody>s, you could always just put a class on the last rowspan-ed table cell, like:
.myTable .lastRowspannedCell {
color: red;
}
<table class='myTable' border='1'>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td rowspan='3' class='lastRowspannedCell'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</table>
I don't know the structure of your back-end code, so that's assuming you can know up-front if a group is the last group.
As a bonus, not using the :last-of-type/:last-child selector nets you better IE8 compatibility, if you care about that.
Related
I'm trying to make a single row with one single column occupy entire space of a row, and no a single column space:
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
</tr>
</thead>
<tbody>
<tr>
<td>L1</td>
<td>L2</td>
<td>L3</td>
<td>L4</td>
</tr>
<tr>
<td>ONE LINE</td> #THIS ONE I WANT TO OCCUPY SPACE OF 4 TDs
</tr>
</tbody>
</table>
I already tried it:
<td style="width:100%">ONE LINE</td>
and
<tr style="width:100%">
<td>ONE LINE</td>
</tr>
You can use the colspan attribute
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
</tr>
</thead>
<tbody>
<tr>
<td>L1</td>
<td>L2</td>
<td>L3</td>
<td>L4</td>
</tr>
<tr>
<td colspan="4">ONE LINE</td>
</tr>
</tbody>
</table>
I would like to convert a column to a row, and display it with the other rows on 1 line. I don't know if it is possible, but if it is, please help! I want to convert table column into table row only using CSS. The table is good, it works fine, but i want to make it responsive, everything on a vertical line, i just get this as result, a Γ shape.
this is what i got:
#media screen and (max-width:650px)
{
table, thead, tbody, tr, th, td{
display:block;
}
thead tr {
display:none;
}
tbody tr{
display:table-row;
width:auto;
}
}
/This is what i goit in HTML/
<table width="1400px">
<thead>
<tr>
<th>a1</th>
<th>a2</th>
<th>a3</th>
<th>a4</th>
</tr>
</thead>
<tbody>
<tr>
<td>b1</td>
<td rowspan="13">b2</td>
<td rowspan="13">b3</td>
<td rowspan="13">b4</td>
</tr>
<tr>
<td>c1</td>
</tr>
<tr>
<td>d1</td>
</tr>
<tr>
<td>e1</td>
</tr>
<tr>
<td>f1</td>
</tr>
<tr>
<td>g1</td>
</tr>
<tr>
<td>h1</td>
</tr>
<tr>
<td>i1</td>
</tr>
<tr>
<td>j1</td>
</tr>
<tr>
<td>k1</td>
</tr>
<tr>
<td>l1</td>
</tr>
<tr>
<td>m1</td>
</tr>
<tr>
<td>n1</td>
</tr>
</tbody>
</table>
I need to target the first <td> element in a table row that is visible--meaning it does not have inline styling of display:none.
Here's the gotchyas:
They are not always hidden
Sometimes more than one is hidden.
I can't edit the HTML or use javascript/jQuery--This needs to be a pure CSS solution (hopefully)
Here is a quick sample of what the code looks like:
<table>
<thead>
<tr>
<th style="display:none">Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Body1</td>
<td>Body2</td>
<td>Body3</td>
<td>Body4</td>
</tr>
</tbody>
</table>
I tried messing with something like this to no avail:
table > tbody > tr > td:first-of-type:not([style*="display:none"])
Here's a fiddle to mess with
Thanks in advance.
If your hidden elements are always at the beginning of the row, you can use the direct sibling selector for this +.
td:first-child,
td[style*="none"] + td {
color: red;
}
<table>
<thead>
<tr>
<th style="display:none">Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Body1</td>
<td>Body2</td>
<td>Body3</td>
<td>Body4</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td style="display:none">and</td>
<td>here's</td>
<td>an</td>
<td style="display:none">edge</td>
<td>case</td>
</tr>
</tbody>
</table>
This will style anything that isn't "display:none", but undo that when it gets to a subsequent "display:none".
table > tbody > tr > td:not([style*="display:none"]) {
color: red;
}
table > tbody > tr > td:not([style*="display:none"]) ~ td:not([style*="display:none"]) {
color: inherit;
}
<table>
<thead>
<tr>
<th style="display:none">Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Body1</td>
<td>Body2</td>
<td>Body3</td>
<td>Body4</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
</tbody>
</table>
I have following table in my site but for some reason the style width:100px does not work for td. Probably some other css is preceding. I have also tried !important but it still doesn't work.
What can I do to get the width to precede all else?
<table>
<tbody>
<tr>
<th>Resurs</th>
<th>Service</th>
<th>Datum</th>
<th>Tid från</th>
<th>Tid till</th>
<th></th>
</tr>
<tr>
<td style="text-align:left">Resource</td>
<td style="width:100px;word-break:break-all">kjslkjfsdjfj sfjlsjfklsljf slfj lsjfs flsj fkljskf lksj fsjf sdlfj lsjföslajfölsjföl afö aölfjas fasöfj </td>
<td>2015-02-22</td>
<td>10.00</td>
<td>11.00</td>
<td>sdfdsf</td>
</tr>
</tbody>
</table>
Does anyone know how I can get the width to work?
Check this jsfiddle
<table>
<tbody>
<tr>
<th>Resurs</th>
<th>Service</th>
<th>Datum</th>
<th>Tid från</th>
<th>Tid till</th>
<th></th>
</tr>
<tr>
<td style="text-align:left">Resource</td>
<td style="width:330px;word-break:break-all">kjslkjfsdjfj sfjlsjfklsljf slfj lsjfs flsj fkljskf lksj fsjf sdlfj lsjföslajfölsjföl afö aölfjas fasöfj </td>
<td>2015-02-22</td>
<td>10.00</td>
<td>11.00</td>
<td>sdfdsf</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/vjka7b5j/
its working properly ,
Im trying to insert an image to a Table :before class by calling the first child on the table. The table has a few different classes and a few duplicates. The class Im trying to work out is
td.familyHeader.foldedlabel.Apple:first-child
which has a few duplicates, and the first-class removes all of them. How can I call only the first one?
The html:
<tbody>
<tr>
<td colspan="10" class="familyHeader foldedlabel Apple"></td>
</tr>
<tr>
<td colspan="10" class="familyHeader foldedlabel Apple"></td>
</tr>
<tr>
<td colspan="10" class="familyHeader foldedlabel Apple"></td>
</tr>
<tr>
<td colspan="10" class="familyHeader foldedlabel"></td>
</tr>
<tr>
<td colspan="10" class="familyHeader foldedlabel"></td>
</tr>
<tr>
<td colspan="10" class="familyHeader foldedlabel"></td>
</tr>
</tbody>
you can use below example to create your own code. It will work.
<style>
table td.aaa {
background:#000;
color:#fff;
}
table td:first-child.aaa {
color:#ff0000
}
</style>
<table>
<tr>
<td class="aaa">1</td>
<td class="aaa">1</td>
<td class="aaa">1</td>
<td class="aaa">1</td>
<td class="aaa">1</td>
</tr>
</table>
If i understand your question correctly:
Because each td is the only child in each tr - it will always be the first child in your selector.
instead you need to select the first tr and then the td within that
The selector you need will be:
tbody tr:first-child td.Apple
I used the selector tbody tr:nth-child(1) td.Apple.
You can find an example here: jsbin.com.