How do I remove all of the borders from an HTML table?

Problem

My objective is to create an HTML page that resembles a “picture frame.” In other words, I’d like to create a blank page bordered by four images.

My code is as follows:

<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>

The following are the CSS classes:

.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 issue is that I’m seeing tiny white lines between the table’s cells, which means that the picture’s border isn’t continuous. What can I do to avoid these blank spaces?

Asked by yazanpro

Solution #1

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

And in css:

table {border: none;}

EDIT: As iGEL pointed out, this method is deprecated (though it still works), so if you’re starting from scratch, you should use jnpcl’s border-collapse solution.

So far, I’m not a fan of this move (I don’t work with tables too much). It makes some chores a little more difficult. For example, if you want to include two separate borders in the same position (visually), one at the top of one row and the other at the bottom of the other row. They’ll collide (meaning just one of them will be seen). Then you must learn how border “priority” is determined and which border styles are “stronger” (double vs. solid etc.).

This was one of my favorites:

<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;}

With border collapse, this won’t work because one border is constantly eliminated. I’ll have to do it in a different way (there are more solutions ofc). One possibility is using 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>

With just a single border, you might utilize a border style like “groove|ridge|inset|outset.” But this isn’t ideal for me because I can’t control both hues.

Perhaps there is a simple and elegant solution for collapsing boundaries, but I haven’t seen it and haven’t spent any time thinking about it. Maybe someone here can show me/us how to do it 😉

Answered by Damb

Solution #2

table {
    border-collapse: collapse;
}

Answered by drudge

Solution #3

To entirely remove the borders from the table and all cells, I needed to do something similar. This does not necessitate any HTML changes, which was beneficial in my case.

table, tr, td {
    border: none;
}

Answered by sean.boyer

Solution #4

None of the top solutions helped in a bootstrap environment, however the following erased all borders:

.noBorder {
    border:none !important;
}

Applied as:

<td class="noBorder">

Answered by Stephan

Solution #5

Here is my solution in a bootstrap environment:

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

Answered by KLMN

Post is based on https://stackoverflow.com/questions/5684144/how-to-completely-remove-borders-from-html-table