How to completely remove borders from HTML table

Question

My goal is to make an HTML page that is similar to a  photo frame   In other words  I want to make a blank page that is surrounded by 4 pictures   This is my code    lt table gt       lt tr gt           lt td class  bTop  colspan  3  gt           lt  td gt       lt  tr gt       lt tr gt           lt td class  bLeft  gt           lt  td gt           lt td class  middle  gt           lt  td gt           lt td class  bRight  gt           lt  td gt       lt  tr gt       lt tr gt           lt td class  bBottom  colspan  3  gt           lt  td gt       lt  tr gt                                                       lt  table gt    And the CSS classes are the following    bTop       width  960px      height  111px      background-image  url     Images BackTop jpg       bLeft       width  212px      height  280px      background-image  url     Images BackLeft jpg             middle       width  536px      height  280px      bRight       width  212px      height  280px      background-image  url     Images BackRight jpg            bBottom               width  960px      height  111px      background-image  url     Images BackBottom jpg               My problem is that I am getting thin white lines between the cells of the table  I mean that the border of pictures is not continuous  How can I avoid these white spaces

User · Answer

In a bootstrap environment here is my solution        lt table style  border-collapse  collapse  border  none   gt           lt tr style  border  none   gt               lt td style  border  none   gt               lt  td gt           lt  tr gt       lt  table gt

User · Answer

In a bootstrap environment none of the top answers helped  but applying the following removed all borders     noBorder       border none  important      Applied as     lt td class  noBorder  gt

User · Answer

table       border-collapse  collapse

User · Answer

This is what resolved the problem for me   In your HTML tr tag  add this    style  border-collapse  collapse  border  none     That removed all the borders that were showing on the table row

User · Answer

Using TinyMCE editor  the only way I was able to remove all borders was to use border hidden in the style like this   lt style gt  table  tr  border hidden   td  th  border hidden    lt  style gt   And in the HTML like this   lt table style  quot border hidden  quot  lt  table gt   Cheers

User · Answer

lt table cellspacing  0  cellpadding  0  gt    And in css   table  border  none     EDIT   As iGEL noted  this solution is officially deprecated  still works though   so if you are starting from scratch  you should go with the jnpcl s border-collapse solution   I actually quite dislike this change so far  don t work with tables that often   It makes some tasks bit more complicated  E g  when you want to include two different borders in same place  visually   while one being TOP for one row  and second being BOTTOM for other row  They will collapse    only one of them will be shown   Then you have to study how is border s  priority  calculated and what border styles are  stronger   double vs  solid etc      I did like this    lt table cellspacing  0  cellpadding  0  gt     lt tr gt       lt td class  first  gt first row lt  td gt     lt  tr gt     lt tr gt       lt td class  second  gt second row lt  td gt     lt  tr gt   lt  table gt   ----------   first  border-bottom 1px solid  EEE    second  border-top 1px solid  CCC     Now  with border collapse  this won t work as there is always one border removed  I have to do it in some other way  there are more solutions ofc   One possibility is using CSS3 with box-shadow    lt table class  tab  gt     lt tr gt       lt td class  first  gt first row lt  td gt     lt  tr gt     lt tr gt       lt td class  second  gt second row lt  td gt     lt  tr gt   lt  table gt       lt style gt   tab  border-collapse collapse    tab  first  border-bottom 1px solid  EEE    tab  second  border-top 1px solid  CCC box-shadow  inset 0 1px 0  CCC     lt  style gt    You could also use something like  groove ridge inset outset  border style with just a single border  But for me  this is not optimal  because I can t control both colors    Maybe there is some simple and nice solution for collapsing borders  but I haven t seen it yet and I honestly haven t spent much time on it  Maybe someone here will be able to show me us

User · Answer

For me I needed to do something like this to completely remove the borders from the table and all cells  This does not require modifying the HTML at all  which was helpful in my case   table  tr  td       border  none

[html] How to completely remove borders from HTML table

Examples related to html

Examples related to css

Examples related to html-table

Examples related to background-image