How to hide the border for specified rows of a table

Question

I want to hide the border for a specific rows of a table How to do it  Any Idea   Sample code is Highly Appreciated

User · Accepted Answer

Use the CSS property border on the  lt td gt s following the  lt tr gt s you do not want to have the border    In my example I made a class noBorder that I gave to one  lt tr gt   Then I use a simple selector tr noBorder td to make the border go away for all the  lt td gt s that are inside of  lt tr gt s with the noBorder class by assigning border  0    Note that you do not need to provide the unit  i e  px  if you set something to 0 as it does not matter anyway  Zero is just zero    x000D   x000D  table  tr  td   x000D    border  3px solid red  x000D    x000D  tr noBorder td   x000D    border  0  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt A1 lt  td gt  x000D       lt td gt B1 lt  td gt  x000D       lt td gt C1 lt  td gt  x000D     lt  tr gt  x000D     lt tr class  noBorder  gt  x000D       lt td gt A2 lt  td gt  x000D       lt td gt B2 lt  td gt  x000D       lt td gt C2 lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt A3 lt  td gt  x000D       lt td gt A3 lt  td gt  x000D       lt td gt A3 lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    Here s the output as an image

User · Answer

I use this with good results   border-style hidden    It also works for   border-right-style hidden    if you want to hide just a border on a cell     Example    x000D   x000D   lt style type  text css  gt  x000D        table  th  td   x000D         border  2px solid green  x000D          x000D        tr hide right  gt  td  td hide right  x000D          border-right-style hidden  x000D          x000D        tr hide all  gt  td  td hide all  x000D          border-style hidden  x000D          x000D      x000D   lt  style gt  x000D   lt table gt  x000D     lt tr gt  x000D       lt td class  hide right  gt 11 lt  td gt  x000D       lt td gt 12 lt  td gt  x000D       lt td class  hide all  gt 13 lt  td gt  x000D     lt  tr gt  x000D     lt tr class  hide right  gt  x000D       lt td gt 21 lt  td gt  x000D       lt td gt 22 lt  td gt  x000D       lt td gt 23 lt  td gt  x000D     lt  tr gt  x000D     lt tr class  hide all  gt  x000D       lt td gt 31 lt  td gt  x000D       lt td gt 32 lt  td gt  x000D       lt td gt 33 lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    Here is the result

User · Answer

Add programatically noborder class to specific row to hide it   lt style gt        noborder                 border none               lt  style gt    lt table gt        lt tr gt          lt th gt heading1 lt  th gt          lt th gt heading2 lt  th gt       lt  tr gt         lt tr gt          lt td gt content1 lt  td gt          lt td gt content2 lt  td gt       lt  tr gt        no border for this row         lt tr class  noborder  gt          lt td gt content1 lt  td gt          lt td gt content2 lt  td gt       lt  tr gt    lt  table gt

User · Answer

You can simply add these lines of codes here to hide a row   Either you can write border 0 or border-style hidden  border  none or it will happen the same thing   x000D   x000D   lt style type  text css  gt  x000D                table  th  td   x000D                 border  1px solid  x000D                  x000D                 x000D                tr hide all  gt  td  td hide all  x000D                   border  0  x000D                   x000D                  x000D              x000D           lt  style gt  x000D       lt table gt  x000D         lt tr gt  x000D           lt th gt Firstname lt  th gt  x000D           lt th gt Lastname lt  th gt  x000D           lt th gt Savings lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Peter lt  td gt  x000D           lt td gt Griffin lt  td gt  x000D           lt td gt  100 lt  td gt  x000D         lt  tr gt  x000D         lt tr class  hide all gt  x000D           lt td gt Lois lt  td gt  x000D           lt td gt Griffin lt  td gt  x000D           lt td gt  150 lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Joe lt  td gt  x000D           lt td gt Swanson lt  td gt  x000D           lt td gt  300 lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Cleveland lt  td gt  x000D           lt td gt Brown lt  td gt  x000D           lt td gt  250 lt  td gt  x000D         lt  tr gt  x000D       lt  table gt  x000D   x000D   x000D    running these lines of codes can solve the problem easily

[html] How to hide the border for specified rows of a table?

Examples related to html

Examples related to css

Examples related to html-table

Examples related to border