Styling the last td in a table with css

Question

I want to style the last TD in a table without using a CSS class on the particular TD    lt table gt     lt tbody gt       lt tr gt         lt td gt One lt  td gt         lt td gt Two lt  td gt         lt td gt Three lt  td gt         lt td gt Four lt  td gt         lt td gt Five lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt   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

User · Accepted Answer

You can use relative rules   table td   td   td   td   td     border  none      This only works if the number of columns isn t determined at runtime

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt table gt       lt col   gt       lt col width  50    gt       lt col id  anId    gt       lt col class  whatever    gt       lt col style  border 1px solid  000     gt       lt tbody gt           lt tr gt               lt td gt One lt  td gt               lt td gt Two lt  td gt               lt td gt Three lt  td gt               lt td gt Four lt  td gt               lt td gt Five lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt

User · Answer

Not a direct answer to your question  but using  lt tfoot  might help you achieve what you need  and of course you can style tfoot

User · Answer

Not a direct answer to your question  but using  lt tfoot  might help you achieve what you need  and of course you can style tfoot

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

This is the code that will add border for all the nodes and will remove the border for the last node TD     lt style type  text css  gt      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                  lt  style gt   lt table gt       lt tr gt           lt td gt Home lt  td gt           lt td gt sunil lt  td gt           lt td gt Kumar lt  td gt           lt td gt Rayadurg lt  td gt           lt td gt Five lt  td gt           lt td gt Six lt  td gt       lt  tr gt   lt  table gt    Enjoy      I want the same instead of border I wanted it using images      -

User · Answer

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

User · Answer

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

User · Answer

You can use the  last-of-type to catch last column of your table   lt style gt   table  gt  tbody  gt  tr  gt  td last-of-type          Give your style Here        lt  style gt

User · Answer

For IE  how about using a CSS expression    lt style type  text css  gt  table td      h  expression this style border    this    this parentNode lastChild    none     1px solid  000          lt  style gt

User · Answer

There is also a different approach   and this would work for tables that aren t static    basically use  lt th gt  instead of  lt td gt  for that column    lt style type  text css  gt   table td   border  1px solid black     table th   border  0px     lt style gt   lt table gt     lt tbody gt       lt tr gt         lt td gt One lt  td gt         lt td gt Two lt  td gt         lt td gt Three lt  td gt         lt td gt Four lt  td gt         lt th gt Five lt  th gt       lt  tr gt       lt tr gt         lt td gt One lt  td gt         lt td gt Two lt  td gt         lt td gt Three lt  td gt         lt td gt Four lt  td gt         lt th gt Five lt  th gt       lt  tr gt     lt  tbody gt   lt  table gt

User · Answer

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

User · Answer

This is the code that will add border for all the nodes and will remove the border for the last node TD     lt style type  text css  gt      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                  lt  style gt   lt table gt       lt tr gt           lt td gt Home lt  td gt           lt td gt sunil lt  td gt           lt td gt Kumar lt  td gt           lt td gt Rayadurg lt  td gt           lt td gt Five lt  td gt           lt td gt Six lt  td gt       lt  tr gt   lt  table gt    Enjoy      I want the same instead of border I wanted it using images      -

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Not a direct answer to your question  but using  lt tfoot  might help you achieve what you need  and of course you can style tfoot

User · Answer

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

User · Answer

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

User · Answer

For IE  how about using a CSS expression    lt style type  text css  gt  table td      h  expression this style border    this    this parentNode lastChild    none     1px solid  000          lt  style gt

User · Answer

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

User · Answer

There is also a different approach   and this would work for tables that aren t static    basically use  lt th gt  instead of  lt td gt  for that column    lt style type  text css  gt   table td   border  1px solid black     table th   border  0px     lt style gt   lt table gt     lt tbody gt       lt tr gt         lt td gt One lt  td gt         lt td gt Two lt  td gt         lt td gt Three lt  td gt         lt td gt Four lt  td gt         lt th gt Five lt  th gt       lt  tr gt       lt tr gt         lt td gt One lt  td gt         lt td gt Two lt  td gt         lt td gt Three lt  td gt         lt td gt Four lt  td gt         lt th gt Five lt  th gt       lt  tr gt     lt  tbody gt   lt  table gt

User · Answer

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    lt table gt       lt col   gt       lt col width  50    gt       lt col id  anId    gt       lt col class  whatever    gt       lt col style  border 1px solid  000     gt       lt tbody gt           lt tr gt               lt td gt One lt  td gt               lt td gt Two lt  td gt               lt td gt Three lt  td gt               lt td gt Four lt  td gt               lt td gt Five lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt

User · Answer

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

User · Answer

You can use the  last-of-type pseudo-class   tr  gt  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

User · Answer

You can use the  last-of-type pseudo-class   tr  gt  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

User · Answer

For IE  how about using a CSS expression    lt style type  text css  gt  table td      h  expression this style border    this    this parentNode lastChild    none     1px solid  000          lt  style gt

User · Answer

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

User · Answer

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

User · Answer

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    lt table gt       lt col   gt       lt col width  50    gt       lt col id  anId    gt       lt col class  whatever    gt       lt col style  border 1px solid  000     gt       lt tbody gt           lt tr gt               lt td gt One lt  td gt               lt td gt Two lt  td gt               lt td gt Three lt  td gt               lt td gt Four lt  td gt               lt td gt Five lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt

User · Answer

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    lt table gt       lt col   gt       lt col width  50    gt       lt col id  anId    gt       lt col class  whatever    gt       lt col style  border 1px solid  000     gt       lt tbody gt           lt tr gt               lt td gt One lt  td gt               lt td gt Two lt  td gt               lt td gt Three lt  td gt               lt td gt Four lt  td gt               lt td gt Five lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt

User · Answer

For IE  how about using a CSS expression    lt style type  text css  gt  table td      h  expression this style border    this    this parentNode lastChild    none     1px solid  000          lt  style gt

User · Answer

You can use the  last-of-type to catch last column of your table   lt style gt   table  gt  tbody  gt  tr  gt  td last-of-type          Give your style Here        lt  style gt

User · Answer

Not a direct answer to your question  but using  lt tfoot  might help you achieve what you need  and of course you can style tfoot

[html] Styling the last td in a table with css

Examples related to html

Examples related to css

Examples related to html-table