I want to style the last TD in a table without using a CSS class on the particular TD.
<table>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>
table td
{
border: 1px solid black;
}
I want the TD containing the text "Five" to not have a border but again, I do not want to use a class.
This question is related to
html
css
html-table
There is also a different approach.. and this would work for tables that aren't static... basically use <th> instead of <td> for that column:
<style type="text/css">
table td { border: 1px solid black; }
table th { border: 0px; }
<style>
<table>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<th>Five</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<th>Five</th>
</tr>
</tbody>
</table>
You can use the col element as specified in HTML 4.0 (link). It works in every browser. You can give it an ID or a class or an inline style. only caveat is that it affects the whole column across all rows. Example:
<table>
<col />
<col width="50" />
<col id="anId" />
<col class="whatever" />
<col style="border:1px solid #000;" />
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>
For IE, how about using a CSS expression:
<style type="text/css">
table td {
h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : '1px solid #000' ) );
}
</style>
You can use the col element as specified in HTML 4.0 (link). It works in every browser. You can give it an ID or a class or an inline style. only caveat is that it affects the whole column across all rows. Example:
<table>
<col />
<col width="50" />
<col id="anId" />
<col class="whatever" />
<col style="border:1px solid #000;" />
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>
For IE, how about using a CSS expression:
<style type="text/css">
table td {
h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : '1px solid #000' ) );
}
</style>
Not a direct answer to your question, but using <tfoot> might help you achieve what you need, and of course you can style tfoot.
This is the code that will add border for all the nodes and will remove the border for the last node(TD).
<style type="text/css">
body {
font-family:arial;font-size: 8pt;
}
table td{
border-right: #666 1px solid
}
table td {
h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : 'border-right: 0px solid' ) );
}
</style>
<table>
<tr>
<td>Home</td>
<td>sunil</td>
<td>Kumar</td>
<td>Rayadurg</td>
<td>Five</td>
<td>Six</td>
</tr>
</table>
Enjoy ...
I want the same instead of border I wanted it using images ... :-)
You can use the :last-of-type pseudo-class:
tr > td:last-of-type {
/* styling here */
}
See the MDN for more info and compatibility with the different browsers.
Check out the W3C CSS guidelines for more info.
you could use the last-child psuedo class
table tr td:last-child {
border: none;
}
This will style the last td only. It's not fully supported yet so it may be unsuitable
You can use the :last-of-type to catch last column of your table.
<style>
.table > tbody > tr > td:last-of-type {
/* Give your style Here; */
}
</style>
If you are already using javascript take a look at jQuery. It supports a browser independent "last-child" selector and you can do something like this.
$("td:last-child").css({border:"none"})
If you are already using javascript take a look at jQuery. It supports a browser independent "last-child" selector and you can do something like this.
$("td:last-child").css({border:"none"})
Not a direct answer to your question, but using <tfoot> might help you achieve what you need, and of course you can style tfoot.
The :last-child selector should do it, but it's not supported in any version of IE.
I'm afraid you have no choice but to use a class.
If you are already using javascript take a look at jQuery. It supports a browser independent "last-child" selector and you can do something like this.
$("td:last-child").css({border:"none"})
try with:
tr:last-child td:last-child{
border:none;
/*any other style*/
}
this will only affect the very last td element in the table, assuming is the only one (else, you'll just have to identify your table). Though, is very general, and it will adapt to the last TD if you add more content to your table. So if it is a particular case
td:nth-child(5){
border:none;
}
should be enough.
In jQuery, provided the table is created either statically or dynamically prior to the following being executed:
$("table tr td:not(:last-child)").css({ "border-right":"1px solid #aaaaaa" });
Just adds a right border to every cell in a table row except the last cell.
The :last-child selector should do it, but it's not supported in any version of IE.
I'm afraid you have no choice but to use a class.
For IE, how about using a CSS expression:
<style type="text/css">
table td {
h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : '1px solid #000' ) );
}
</style>
you could use the last-child psuedo class
table tr td:last-child {
border: none;
}
This will style the last td only. It's not fully supported yet so it may be unsuitable
You can use the :last-of-type to catch last column of your table.
<style>
.table > tbody > tr > td:last-of-type {
/* Give your style Here; */
}
</style>
Not a direct answer to your question, but using <tfoot> might help you achieve what you need, and of course you can style tfoot.
You can use the col element as specified in HTML 4.0 (link). It works in every browser. You can give it an ID or a class or an inline style. only caveat is that it affects the whole column across all rows. Example:
<table>
<col />
<col width="50" />
<col id="anId" />
<col class="whatever" />
<col style="border:1px solid #000;" />
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>
In jQuery, provided the table is created either statically or dynamically prior to the following being executed:
$("table tr td:not(:last-child)").css({ "border-right":"1px solid #aaaaaa" });
Just adds a right border to every cell in a table row except the last cell.
If you are already using javascript take a look at jQuery. It supports a browser independent "last-child" selector and you can do something like this.
$("td:last-child").css({border:"none"})
The :last-child selector should do it, but it's not supported in any version of IE.
I'm afraid you have no choice but to use a class.
try with:
tr:last-child td:last-child{
border:none;
/*any other style*/
}
this will only affect the very last td element in the table, assuming is the only one (else, you'll just have to identify your table). Though, is very general, and it will adapt to the last TD if you add more content to your table. So if it is a particular case
td:nth-child(5){
border:none;
}
should be enough.
you could use the last-child psuedo class
table tr td:last-child {
border: none;
}
This will style the last td only. It's not fully supported yet so it may be unsuitable
I was looking for a way to do this too and found this, could be useful for other people:
#table td:last-of-type { border: none; }
Note that it's not supported by IE either.
you could use the last-child psuedo class
table tr td:last-child {
border: none;
}
This will style the last td only. It's not fully supported yet so it may be unsuitable
The :last-child selector should do it, but it's not supported in any version of IE.
I'm afraid you have no choice but to use a class.
Javascript is the only viable way to do this client side (that is, CSS won't help you). In jQuery:
$("table td:last").css("border", "none");
Not a direct answer to your question, but using <tfoot> might help you achieve what you need, and of course you can style tfoot.
This is the code that will add border for all the nodes and will remove the border for the last node(TD).
<style type="text/css">
body {
font-family:arial;font-size: 8pt;
}
table td{
border-right: #666 1px solid
}
table td {
h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : 'border-right: 0px solid' ) );
}
</style>
<table>
<tr>
<td>Home</td>
<td>sunil</td>
<td>Kumar</td>
<td>Rayadurg</td>
<td>Five</td>
<td>Six</td>
</tr>
</table>
Enjoy ...
I want the same instead of border I wanted it using images ... :-)
You can use the :last-of-type pseudo-class:
tr > td:last-of-type {
/* styling here */
}
See the MDN for more info and compatibility with the different browsers.
Check out the W3C CSS guidelines for more info.
You can use the col element as specified in HTML 4.0 (link). It works in every browser. You can give it an ID or a class or an inline style. only caveat is that it affects the whole column across all rows. Example:
<table>
<col />
<col width="50" />
<col id="anId" />
<col class="whatever" />
<col style="border:1px solid #000;" />
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>
Javascript is the only viable way to do this client side (that is, CSS won't help you). In jQuery:
$("table td:last").css("border", "none");
There is also a different approach.. and this would work for tables that aren't static... basically use <th> instead of <td> for that column:
<style type="text/css">
table td { border: 1px solid black; }
table th { border: 0px; }
<style>
<table>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<th>Five</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<th>Five</th>
</tr>
</tbody>
</table>
Source: Stackoverflow.com