Border around specific rows in a table

Question

I m trying to design some HTML CSS that can put a border around specific rows in a table  Yes  I know I m not really supposed to use tables for layout but I don t know enough CSS to completely replace it yet   Anyways  I have a table with multiple rows and columns  some merged with rowspan and colspan  and I d like to put a simple border around parts of the table  Currently  I m using 4 separate CSS classes  top  bottom  left  right  that I attach to the  lt td gt  cells that are along the top  bottom  left  and right of the table respectively    x000D   x000D   top   x000D    border-top  thin solid  x000D    border-color  black  x000D    x000D   x000D   bottom   x000D    border-bottom  thin solid  x000D    border-color  black  x000D    x000D   x000D   left   x000D    border-left  thin solid  x000D    border-color  black  x000D    x000D   x000D   right   x000D    border-right  thin solid  x000D    border-color  black  x000D    x000D   lt html gt  x000D   x000D   lt body gt  x000D   x000D     lt table cellspacing  0  gt  x000D       lt tr gt  x000D         lt td gt no border lt  td gt  x000D         lt td gt no border here either lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td class  top left  gt one lt  td gt  x000D         lt td class  top right  gt two lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td class  bottom left  gt three lt  td gt  x000D         lt td class  bottom right  gt four lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td colspan  2  gt once again no borders lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td class  top bottom left right  colspan  2  gt hello lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td colspan  2  gt world lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    Is there any easier way to do what I want  I tried applying top and bottom to a  lt tr gt  but it didn t work   p s  I m new to CSS  so there s probably a really basic solution to this that I ve missed    note  I do need to have multiple bordered sections  The basic idea is to have multiple bordered clusters each containing multiple rows

User · Answer

I was just playing around with doing this too, and this seemed to be the best option for me:

<style>
    tr { 
        display: table;            /* this makes borders/margins work */
        border: 1px solid black;
        margin: 5px;
    }
</style>

Note that this will prevent the use of fluid/automatic column widths, as cells will no longer align with those in other rows, but border/colour formatting still works OK. The solution is to give the TR and TDs a specified width (either px or %).

Of course you could make the selector tr.myClass if you wanted to apply it only to certain rows. Apparently display: table doesn't work for IE 6/7, however, but there's probably other hacks (hasLayout?) that might work for those. :-(

User · Answer

Thank you to all that have responded  I ve tried all of the solutions presented here and I ve done more searching on the internet for other possible solutions  and I think I ve found one that s promising    x000D   x000D  tr top td   x000D    border-top  thin solid black  x000D    x000D   x000D  tr bottom td   x000D    border-bottom  thin solid black  x000D    x000D   x000D  tr row td first-child   x000D    border-left  thin solid black  x000D    x000D   x000D  tr row td last-child   x000D    border-right  thin solid black  x000D    x000D   lt html gt  x000D   x000D   lt head gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D   x000D     lt table cellspacing  0  gt  x000D       lt tr gt  x000D         lt td gt no border lt  td gt  x000D         lt td gt no border here either lt  td gt  x000D       lt  tr gt  x000D       lt tr class  top row  gt  x000D         lt td gt one lt  td gt  x000D         lt td gt two lt  td gt  x000D       lt  tr gt  x000D       lt tr class  bottom row  gt  x000D         lt td gt three lt  td gt  x000D         lt td gt four lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td colspan  2  gt once again no borders lt  td gt  x000D       lt  tr gt  x000D       lt tr class  top bottom row  gt  x000D         lt td colspan  2  gt hello lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td colspan  2  gt world lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    Output     Instead of having to add the top  bottom  left  and right classes to every  lt td gt   all I have to do is add top row to the top  lt tr gt   bottom row to the bottom  lt tr gt   and row to every  lt tr gt  in between  Is there anything wrong with this solution  Are there any cross-platform issues I should be aware of

User · Answer

Based on your requirement that you want to put a border around an arbitrary block of MxN cells there really is no easier way of doing it without using Javascript  If your cells are fixed with you can use floats but this is problematic for other reasons  what you re doing may be tedious but it s fine   Ok  if you re interested in a Javascript solution  using jQuery  my preferred approach   you end up with this fairly scary piece of code    lt html gt   lt head gt    lt style type  text css  gt  td top   border-top  thin solid black    td bottom   border-bottom  thin solid black    td left   border-left  thin solid black    td right   border-right  thin solid black     lt  style gt   lt script type  text javascript  src  jquery-1 3 1 js  gt  lt  script gt   lt script type  text javascript  gt    function       box 2  1  2  2        function box row  col  height  width      if  typeof height     undefined         height   1        if  typeof width     undefined         width   1           table   each function            tr nth-child     row        this  children   slice col - 1  col   width - 1  addClass  top           tr nth-child      row   height - 1         this  children   slice col - 1  col   width - 1  addClass  bottom           tr   this  slice row - 1  row   height - 1  each function               nth-child     col        this  addClass  left              nth-child      col   width - 1         this  addClass  right                     lt  script gt   lt  head gt   lt body gt    lt table cellspacing  0  gt     lt tr gt       lt td gt no border lt  td gt       lt td gt no border here either lt  td gt     lt  tr gt     lt tr gt       lt td gt one lt  td gt       lt td gt two lt  td gt     lt  tr gt     lt tr gt       lt td gt three lt  td gt       lt td gt four lt  td gt     lt  tr gt     lt tr gt       lt td colspan  2  gt once again no borders lt  td gt     lt  tr gt   lt  tfoot gt   lt  table gt   lt  html gt    I ll happily take suggestions on easier ways to do this

User · Answer

the trick is with outline property thanks to enigment s answer with little modification  use this class    row-border      outline  thin solid black      outline-offset  -1px      then in the HTML   lt tr gt      lt  tr gt   lt tr class  row-border  gt       lt td gt     lt  td gt       lt td gt     lt  td gt   lt  tr gt    and the result is   hope this helps you

User · Answer

An easier way is to make the table a server side control  You could use something similar to this   Dim x As Integer table1 Border    1    Change the first 10 rows to have a black border  For x   1 To 10      table1 Rows x  BorderColor    Black   Next   Change the rest of the rows to white  For x   11 To 22      table1 Rows x  BorderColor    White   Next

User · Answer

Here s an approach using tbody elements that could be the way to do it  You can t set the border on a tbody  same as you can t on a tr  but you can set the background colour  If the effect you re wanting to acheive can be obtained with a background colour on the groups of rows instead of a border this will work    lt table cellspacing  0  gt         lt tbody gt           lt tr gt                   lt td gt no border lt  td gt                   lt td gt no border here either lt  td gt             lt  tr gt         lt tbody bgcolor  gray  gt           lt tr gt                   lt td gt one lt  td gt                   lt td gt two lt  td gt             lt  tr gt             lt tr gt                   lt td gt three lt  td gt                   lt td gt four lt  td gt             lt  tr gt         lt tbody gt           lt tr gt                    lt td colspan  2  gt once again no borders lt  td gt             lt  tr gt         lt tbody bgcolor  gray  gt           lt tr gt                    lt td colspan  2  gt hello lt  td gt             lt  tr gt       lt tbody gt       lt tr gt                lt td colspan  2  gt world lt  td gt         lt  tr gt   lt  table gt

User · Answer

If you set the border-collapse style to collapse on the parent table you should be able to style the tr    styles are inline for demo     lt table style  border-collapse  collapse   gt     lt tr gt       lt td gt No Border lt  td gt     lt  tr gt     lt tr style  border 2px solid  f00   gt       lt td gt Border lt  td gt     lt  tr gt     lt tr gt       lt td gt No Border lt  td gt     lt  tr gt   lt  table gt    Output

User · Answer

The only other way I can think of to do it is to enclose each of the rows you need a border around in a nested table  That will make the border easier to do but will potentially creat other layout issues  you ll have to manually set the width on table cells etc    Your approach may well be the best one depending on your other layout rerquirements and the suggested approach here is just a possible alternative    lt table cellspacing  0  gt         lt tr gt               lt td gt no border lt  td gt               lt td gt no border here either lt  td gt         lt  tr gt         lt tr gt           lt td gt                lt table style  border  thin solid black  gt                     lt tr gt                               lt td gt one lt  td gt                               lt td gt two lt  td gt                       lt  tr gt                       lt tr gt                             lt td gt three lt  td gt                             lt td gt four lt  td gt                       lt  tr gt                  lt  table gt            lt  td gt       lt  tr gt       lt tr gt                lt td colspan  2  gt once again no borders lt  td gt         lt  tr gt         lt tr gt           lt td gt                lt table style  border  thin solid black  gt                     lt tr gt                               lt td gt hello lt  td gt                        lt  tr gt                lt  table gt            lt  td gt       lt  tr gt       lt tr gt                lt td colspan  2  gt world lt  td gt         lt  tr gt   lt  table gt

User · Answer

How about tr  outline  thin solid black    Works for me on tr or tbody elements  and appears to be compatible with the most browsers  including IE 8  but not before

User · Answer

Group rows together using the  lt tbody gt  tag and then apply style    lt table gt     lt tr gt  lt td gt No Style here lt  td gt  lt  tr gt     lt tbody class  red-outline  gt       lt tr gt  lt td gt Style me lt  td gt  lt  tr gt       lt tr gt  lt td gt And me lt  td gt  lt  tr gt     lt  tbody gt     lt tr gt  lt td gt No Style here lt  td gt  lt  tr gt   lt  table gt      And the css in style css   red-outline     outline  1px solid red

[html] Border around specific rows in a table?

Examples related to html

Examples related to css

Examples related to border

Examples related to css-tables