CODEWITHSUNDEEP
htmlcsshtml-tablebackground-image
yazanpro
yazanpro

Reputation: 4772

How to completely remove borders from HTML table

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?

Upvotes: 205

Views: 1058472

Answers (13)

Alwin van der Sluis
Alwin van der Sluis

Reputation: 1

This solved my problem of tiny borders around th,td (=the color of the background table). Set the color of the box-shadow: 1px 1px 1px #003366; the same as the background-color. Tried in Edge, Chrome and Firefox!

table {
    padding: 0;
    border-collapse: collapse;
    border: none;
}
th {
    background-color: #003366;
    color: white;   
    text-align: center; 
    box-shadow: 1px 1px 1px #003366;
}

Upvotes: 0

Valentine Shi
Valentine Shi

Reputation: 7858

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.

Upvotes: 8

MomasVII
MomasVII

Reputation: 5081

I found border-spacing to be my issue

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

Upvotes: 1

tintinve
tintinve

Reputation: 97

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

Upvotes: 1

vishal sharma
vishal sharma

Reputation: 190

table {
   border: none;
}

You can user this css property to hide table border.

Upvotes: 0

Tendai kastande
Tendai kastande

Reputation: 41

Use this Css style in your global CSS

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

Upvotes: 1

Marty999
Marty999

Reputation: 233

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

Upvotes: 6

jrn.ak
jrn.ak

Reputation: 36627

table {
    border-collapse: collapse;
}

Upvotes: 140

KLMN
KLMN

Reputation: 559

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>

Upvotes: 21

Khozanai
Khozanai

Reputation: 49

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.

Upvotes: 5

Stephan
Stephan

Reputation: 311

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

Upvotes: 31

sean.boyer
sean.boyer

Reputation: 1237

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

Upvotes: 50

Damb
Damb

Reputation: 14610

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

Upvotes: 253

Related Questions