Add border-bottom to table row tr

Question

I have a table of 3 by 3  I need a way to add a border for the bottom of every row tr and give it a specific color   First I tried the direct way  i e     lt tr style  border-bottom 1pt solid black   gt    But that didn t work  So I added CSS like this   tr   border-bottom  1pt solid black      That still didn t work   I would prefer to use CSS because then I don t need to add a style attribute to every row  I haven t added a border attribute to the  lt table gt   I hope that that is not affecting my CSS

User · Answer

Add border-collapse collapse to your table rule  table        border-collapse  collapse      Example  x000D   x000D  table     border-collapse  collapse     tr     border-bottom  1pt solid black    x000D   lt table gt     lt tr gt  lt td gt A1 lt  td gt  lt td gt B1 lt  td gt  lt td gt C1 lt  td gt  lt  tr gt     lt tr gt  lt td gt A2 lt  td gt  lt td gt B2 lt  td gt  lt td gt C2 lt  td gt  lt  tr gt     lt tr gt  lt td gt A2 lt  td gt  lt td gt B2 lt  td gt  lt td gt C2 lt  td gt  lt  tr gt   lt  table gt  x000D   x000D   x000D   Link

User · Answer

No CSS border bottom    lt table gt       lt thead gt           lt tr gt               lt th gt Title lt  th gt           lt  tr gt           lt tr gt               lt th gt                   lt hr gt               lt  th gt           lt  tr gt       lt  thead gt   lt  table gt

User · Answer

HTML   lt tr class  bottom-border  gt   lt  tr gt    CSS  tr bottom-border     border-bottom  1px solid  222

User · Answer

I had a problem like this before  I don t think tr can take a border styling directly  My workaround was to style the tds in the row   lt tr class  quot border bottom quot  gt   CSS  tr border bottom td     border-bottom  1px solid black

User · Answer

Display the row as a block   tr       display  block      border-bottom  1px solid  000      and to display alternate colors simply   tr oddrow       display  block      border-bottom  1px solid  F00

User · Answer

You can t put a border on a tr element  This worked for me in firefox and IE 11    lt td style  border-bottom 1pt solid black  gt

User · Answer

Use   border-collapse collapse as Nathan wrote and you need to set  td   border-bottom  1px solid  000

User · Answer

I tried adding      table         border-collapse  collapse             alongside the       tr         bottom-border  2pt solid  color          and then commented out border-collapse to see what worked   Just having the tr selector with bottom-border property worked for me   No Border CSS ex     No Border Photo live    CSS Border ex     Table with Border photo live

User · Answer

Another solution to this is border-spacing property    x000D   x000D  table td   x000D    border-bottom  2px solid black  x000D    x000D   x000D  table   x000D    border-spacing  0px  x000D    x000D   lt table gt  x000D    lt tr gt  x000D      lt td gt ABC lt  td gt  x000D      lt td gt XYZ lt  td gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

There are lot of incomplete answers here  Since you cannot apply a border to tr tag  you need to apply it to the td or th tags like so   td     border-bottom  1pt solid black      Doing this will leave a small space between each td  which is likely not desirable if you want the border to appear as though it is the tr tag  In order to  fill in the gaps  so to speak  you need to utilize the border-collapse property on the table element and set its value to collapse  like so   table     border-collapse  collapse

User · Answer

Several interesting answers  Since you just want a border bottom  or top  here are two more  Assuming you want a blue border 3px thick  In the style section you could add   blueB  background-color blue  height 3px  or hr  background-color blue  color blue height 3px    In the table code either   lt tr gt  lt td colspan  3  class  blueB gt  lt  td gt  lt  tr gt  or  lt tr gt  lt td colspan  3  gt  lt hr gt  lt  td gt  lt  tr gt

User · Answer

Use   table border-collapse collapse  tr border-top thin solid    Replace  thin solid  with CSS properties

User · Answer

You can use the box-shadow property to fake a border of a tr element  Adjust Y position of box-shadow  below represented as 2px  to adjust thickness   tr     -webkit-box-shadow  0px 2px 0px 0px rgba 0 0 0 0 99     -moz-box-shadow  0px 2px 0px 0px rgba 0 0 0 0 99     box-shadow  0px 2px 0px 0px rgba 0 0 0 0 99

User · Answer

I found when using this method that the space between the td elements caused a gap to form in the border  but have no fear     One way around this    lt tr gt       lt td gt          Example of normal table data      lt  td gt        lt td class  end  colspan     total number of columns in entire table    gt             insert nothing in here          lt  td gt   lt  tr gt    With the CSS   td end      border 2px solid black

User · Answer

lt td style  border-bottom-style  solid  border-bottom  thick dotted  ff0000    gt   You can do the same to the whole row as well   There is border-bottom-style  border-top-style border-left-style border-right-style  Or simply border-style that apply to all four borders at once   You can see  and TRY YOURSELF online  more details here

User · Answer

Use border-collapse collapse on table and border-bottom  1pt solid black  on the tr

[html] Add border-bottom to table row <tr>

Example

Examples related to html

Examples related to css

Examples related to html-table