Giving a border to an HTML table row tr

Question

Is it possible to border a table row   lt tr gt  in one go instead of giving a border to individual cells   lt td gt  like    x000D   x000D   lt table cellpadding  0  cellspacing  0  width  100   style  border  1px   rules  none  gt  x000D       lt tbody gt  x000D           lt tr gt  x000D               lt th style  width  96px   gt Column 1 lt  th gt  x000D               lt th style  width  96px   gt Column 2 lt  th gt  x000D               lt th style  width  96px   gt Column 3 lt  th gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D               lt td gt  amp nbsp  lt  td gt  x000D               lt td gt  amp nbsp  lt  td gt  x000D               lt td gt  amp nbsp  lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D               lt td style  border-left  thin solid  border-top  thin solid  border-bottom  thin solid   gt  amp nbsp  lt  td gt  x000D               lt td style  border-top  thin solid  border-bottom  thin solid   gt  amp nbsp  lt  td gt  x000D               lt td style  border-top  thin solid  border-bottom  thin solid  border-right  thin solid   gt  amp nbsp  lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D               lt td gt  amp nbsp  lt  td gt  x000D               lt td gt  amp nbsp  lt  td gt  x000D               lt td gt  amp nbsp  lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    This gives a border around the given  lt tr gt  but it requires a border around individual cells   Can we give a border to  lt tr gt  only in one go    rarr  jsFiddle

User · Answer

adding border-spacing  0rem 0 5rem  creates a space for each cell  td  th  items on its bottom while leaving no space between the cells     table app-table          border-collapse  separate          border-spacing  0rem 0 5rem            table app-table thead tr border-row the      table app-table tbody tr border-row td      table app-table tbody tr border-row th          border-top  1px solid  EAEAEA          border-bottom  1px solid  EAEAEA          vertical-align  middle          white-space  nowrap          font-size  0 875rem             table app-table thead tr border-row th first-child      table app-table tbody tr border-row td first-child          border-left  1px solid  EAEAEA             table app-table thead tr border-row th last-child      table app-table tbody tr border-row td last-child          border-right  1px solid  EAEAEA

User · Answer

After fighting with this for a long time I have concluded that the spectacularly simple answer is to just fill the table with empty cells to pad out every row of the table to the same number of cells  taking colspan into account  obviously   With computer-generated HTML this is very simple to arrange  and avoids fighting with complex workarounds  Illustration follows    lt h3 gt Table borders belong to cells  and aren t present if there is no cell lt  h3 gt   lt table style  border 1px solid red  width 100   border-collapse collapse   gt       lt tr style  border-top 1px solid darkblue   gt           lt th gt Col 1 lt th gt Col 2 lt th gt Col 3      lt tr style  border-top 1px solid darkblue   gt           lt td gt Col 1 only      lt tr style  border-top 1px solid darkblue   gt           lt td colspan 2 gt Col 1 2 only      lt tr style  border-top 1px solid darkblue   gt           lt td gt 1 lt td gt 2 lt td gt 3   lt  table gt     lt h3 gt Simple solution  artificially insert empty cells lt  h3 gt    lt table style  border 1px solid red  width 100   border-collapse collapse   gt       lt tr style  border-top 1px solid darkblue   gt           lt th gt Col 1 lt th gt Col 2 lt th gt Col 3      lt tr style  border-top 1px solid darkblue   gt           lt td gt Col 1 only lt td gt  lt td gt       lt tr style  border-top 1px solid darkblue   gt           lt td colspan 2 gt Col 1 2 only lt td gt       lt tr style  border-top 1px solid darkblue   gt           lt td gt 1 lt td gt 2 lt td gt 3   lt  table gt

User · Answer

x000D   x000D   lt table cellpadding  0  cellspacing  0  width  100   style  border  1px   rules  none  gt  x000D       lt tbody gt  x000D           lt tr gt  x000D               lt th style  width  96px   gt Column 1 lt  th gt  x000D               lt th style  width  96px   gt Column 2 lt  th gt  x000D               lt th style  width  96px   gt Column 3 lt  th gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D               lt td gt  amp nbsp  lt  td gt  x000D               lt td gt  amp nbsp  lt  td gt  x000D               lt td gt  amp nbsp  lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D               lt td style  border-left  thin solid  border-top  thin solid  border-bottom  thin solid   gt  amp nbsp  lt  td gt  x000D               lt td style  border-top  thin solid  border-bottom  thin solid   gt  amp nbsp  lt  td gt  x000D               lt td style  border-top  thin solid  border-bottom  thin solid  border-right  thin solid   gt  amp nbsp  lt  td gt  x000D           lt  tr gt  x000D   x000D           lt tr gt  x000D               lt td gt  amp nbsp  lt  td gt  x000D               lt td gt  amp nbsp  lt  td gt  x000D               lt td gt  amp nbsp  lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Absolutely  Just use   lt tr style  outline  thin solid  gt    on which ever row you like  Here s a fiddle   Of course  as people have mentioned  you can do this via an id  or class  or some other means if you wish

User · Answer

Left cell   style  border-style solid border-width  1px 0px 1px 1px     midd cell s    style  border-style solid border-width  1px 0px 1px 0px     right cell   style  border-style solid border-width  1px 1px 1px 0px

User · Answer

You can use the box-shadow property on a tr element as a subtitute for a border  As a plus  any border-radius property on the same element will also apply to the box shadow   box-shadow  0px 0px 0px 1px rgb 0  0  0

User · Answer

You can set border properties on a tr element  but according to the CSS 2 1 specification  such properties have no effect in the separated borders model  which tends to be the default in browsers  Ref   17 6 1 The separated borders model   The initial value of border-collapse is separate according to CSS 2 1  and some browsers also set it as default value for table  The net effect anyway is that you get separated border on almost all browsers unless you explicitly specifi collapse    Thus  you need to use collapsing borders  Example     lt style gt  table   border-collapse  collapse    tr nth-child 3    border  solid thin     lt  style gt

User · Answer

Yes  I updated my answer DEMO  table td       border-top  thin solid       border-bottom  thin solid     table td first-child        border-left  thin solid     table td last-child        border-right  thin solid      If you want to style only one  lt tr gt  you can do it with a class  Second DEMO

User · Answer

Make use of CSS classes   tr border      outline  thin solid      and use it like    lt tr class  border  gt     lt  tr gt

[html] Giving a border to an HTML table row, <tr>

Examples related to html

Examples related to css

Examples related to border

Examples related to html-table