How to completely remove borders from an HTML table

Question

My goal is to create an HTML page that looks like a "photo frame". In other words, I want to make a blank page that is surrounded by 4 pictures.

This is my code:

<table> <tr> <td class="bTop" colspan="3"> </td> </tr> <tr> <td class="bLeft"> </td> <td class="middle"> </td> <td class="bRight"> </td> </tr> <tr> <td class="bBottom" colspan="3"> </td> </tr> </table> 

And the CSS classes are as follows:

 .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 get thin white lines between the cells of the table, I mean that the border of the images is not continuous. How can I avoid these gaps?

Answer 1

 <table cellspacing="0" cellpadding="0"> 

And in css:

 table {border: none;} 

EDIT: As iGEL noted, this solution is officially deprecated (still working), so if you are starting from scratch you should go with jnpcl border-collapse solution.

Actually, I don’t like this change at all (often I don’t work with tables). This complicates some tasks. For example. when you want to include two different borders in the same place (visually), and one is TOP for one line, and the second is BOTTOM for another line. They will crash (= only one of them will be shown). Then you need to learn how the boundary “priority” is calculated and which border styles are “stronger” (double vs. solid, etc.).

I like it:

 <table cellspacing="0" cellpadding="0"> <tr> <td class="first">first row</td> </tr> <tr> <td class="second">second row</td> </tr> </table> ---------- .first {border-bottom:1px solid #EEE;} .second {border-top:1px solid #CCC;} 

Now, when the border is broken, this will not work, because one border is always deleted. I have to do it in some other way (there are more ofc solutions). One possibility is to use CSS3 with box-shadow:

 <table class="tab"> <tr> <td class="first">first row</td> </tr> <tr> <td class="second">second row</td> </tr> </table>​​​ <style> .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;}​ </style> 

You can also use something like the groove | ridge | inset | outset style with one border. But for me this is not optimal, because I can not control both colors.

Maybe there is a simple and pleasant solution for dropping boundaries, but I have not seen it yet, and I honestly have not spent much time on this. Maybe someone here can show me / us;)

Answer 2

 table { border-collapse: collapse; } /* remove padding */ td, th { padding: 0; } 

Answer 3

In the bootstrap environment, none of the top answers helped, but applied the following deleted all boundaries:

 .noBorder { border:none !important; } 

It is applied as:

 <td class="noBorder"> 

Answer 4

For me, I needed to do something similar to completely remove borders from the table and all cells. This does not require modification of HTML at all, which was useful in my case.

 table, tr, td { border: none; } 

Answer 5

Here is what resolved the issue for me:

In the HTML tag tag, add the following:

 style="border-collapse: collapse; border: none;" 

This removed all the borders that were shown in the row of the table.

Answer 6

In bootstrap environment, here is my solution:

  <table style="border-collapse: collapse; border: none;"> <tr style="border: none;"> <td style="border: none;"> </td> </tr> </table>