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:

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

Damb · Accepted Answer · 2012-11-25T21:31:08.837

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

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:

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

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

cellspacing & cellpadding are deprecated since 1999, see https://developer.mozilla.org/en-US/docs/HTML/Element/table - You should go with @jnpcl solution. — iGEL, Sep 06 '12 at 08:50
iGEL is right, I have edited my answer . Honestly, I was surprised, that it is deprecated for such a long time and I was still using it without any problems :) — Damb, Nov 25 '12 at 21:32
I was going to upvote this answer, until I saw the css syntax formatting. — Millar248, Sep 09 '22 at 14:40

score 132 · Answer 2 · edited Oct 06 '18 at 15:46

132

table {
    border-collapse: collapse;
}

edited Oct 06 '18 at 15:46

Aruna Herath

6,241
1
40
59

answered Apr 16 '11 at 03:16

drudge

35,471
7
34
45

score 46 · Answer 3 · answered May 06 '16 at 15:17

46

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

answered May 06 '16 at 15:17

sean.boyer

1,187
16
24

5

Tried every suggestion till here, and finally `border: none` applied to `td` convinced jekyll to make a borderless table: `` – Avio Apr 27 '18 at 16:01
1

Thanks a lot! This worked for me. I would add `th` as one of the selectors to hide the border from the table headers as well. – Ejaz Ahmed Sep 09 '22 at 05:24

score 28 · Answer 4 · edited Nov 12 '16 at 10:30

28

In a bootstrap environment none of the top answers helped, but applying the following removed all borders:

.noBorder {
    border:none !important;
}

Applied as:

<td class="noBorder">

edited Nov 12 '16 at 10:30

Gokhan Kurt

8,239
1
27
51

answered Jul 20 '16 at 08:03

Stephan

281
3
3

2

This suggestion worked for me in Wordpress. I was having difficulty getting the border none to be enforced. – robbpriestley Dec 13 '16 at 16:42

score 20 · Answer 5 · answered Aug 24 '17 at 08:38

20

In a bootstrap environment here is my solution:

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

answered Aug 24 '17 at 08:38

KLMN

529
4
13

score 5 · Answer 6 · edited Feb 08 '17 at 09:27

5

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.

edited Feb 08 '17 at 09:27

Igor

12,165
4
57
73

answered Feb 08 '17 at 09:07

Khozanai

51
1
2

score 5 · Answer 7 · answered Dec 04 '20 at 11:35

Using TinyMCE editor, the only way I was able to remove all borders was to use border:hidden in the style like this:

<style>
table, tr {border:hidden;}
td, th {border:hidden;}
</style>

And in the HTML like this:

<table style="border:hidden;"</table>

Cheers

Valentine Shi · Answer 8 · 2023-04-24T10:54:31.623

4

Nothing of the answers here worked in 2022 (at least for Chrome) except <table cellspacing="0" cellpadding="0">. However I needed a CSS solution, not the HTML one. So here it is:

table,
thead,
tbody,
tfoot,
tr,
th,
td {
    padding: 0;
    border-spacing: 0;
}

padding is the CSS synonym for HTML cellpadding and border-spacing is respectively for cellspacing. Not quite an obvious thing though.

edited Apr 24 '23 at 10:54

answered Mar 29 '22 at 06:36

Valentine Shi

6,604
4
46
46

score 1 · Answer 9 · answered Mar 03 '21 at 12:28

1

Use this Css style in your global CSS

.table,
.monthview-datetable td,
.monthview-datetable th {
  border: none !important;
}

answered Mar 03 '21 at 12:28

Tendai kastande

41
5

score 1 · Answer 10 · answered Jan 31 '22 at 23:34

1

I found border-spacing to be my issue

 td, th, tr, table {
    border: 0 !important;
    border-spacing:0 !important;
  }

answered Jan 31 '22 at 23:34

MomasVII

4,641
5
35
52

score 0 · Answer 11 · answered Sep 08 '21 at 02:48

0

table {
   border: none;
}

You can user this css property to hide table border.

answered Sep 08 '21 at 02:48

vishal sharma

142
5

score 0 · Answer 12 · answered Jan 04 '22 at 16:06

Given:

    <table>
            <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
            </tr>
    <table>

Using this on your CSS would work:

tr { 
    border: transparent 1px solid; 
   }

How to completely remove borders from HTML table

12 Answers12

Use this Css style in your global CSS

Linked

Related