How do you Hide a Cell Border?

HTML & CSS
1

I have a table that has merged rows but also regular, unmerged rows/cells.

I set this style…


  td {
    margin: 0px;
    padding: 5px;
    border: 1px solid #808080;
    text-align: left;

  }

for simplicity.

How do I tell CSS to “erase” the inside borders on a block of 3 merged rows so there is just an outside border?

I tried…


    border: 0px solid #808080;

but that didn’t work.

Amy

2

border-collapse:collapse;

3

Ryan,

That won’t work.

(This would be much easier if you could see…)

I have 3 rows but I only want an outside border. So the border between Row #1 and Row #2 should disappear and the border between Row #2 and Row #3 should disappear. But I still need the outside border.

Understand these “3 rows” are a subset of a larger table…

If I recall correctly, all “border-collapse:collapse;” does is to collapse borders into a single border when possible.

Amy

4

Something like this should work.

http://rockatee.com/temp/table-borders.html

<table>
    <tbody class="border">
        <tr>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
    </tbody>
</table>


    table {
        border-collapse: collapse;
        margin:100px auto;
    }
    
    td {
        margin: 0px;
        padding: 5px;
        text-align: left;
        border:1px solid #080808;
    }
    
    .border {
        border: 1px solid #080808;
    }

    .noborders td {
        border:0;
    }
5

If you just want a border around the whole table, but not around the cells, this would work too:

table {border: 1px solid #808080;}
td {border: 0;}
6

Thanks, Maleika, that was right on the money!!! :tup:

It took me quite some time to figure out how everything worked, and more so, where my code was slightly off, but my end result looks great.

Hopefully you’ll see it sometime soon.

Amy
:slight_smile:

7

Ralph,

Yah, I already knew that, but thanks for the suggestion anyway. :slight_smile:

Amy

P.S. You shouldn’t need the “td {border: 0;}” part, though.

8

I waas under the assumption you wnated only 1px border between the cells so I offered the border-collapse. Sorry about that :eye:

9

No problem.

That is a downside when we’re stuck with text-only communication!

In a few days I should have a web-hosting account and then I’ll be able to post pretty pictures/screenshots/actual webpages for you to see when I ask questions which should help immensely! :slight_smile:

Thanks,

Amy

10

You can upload your screenshots to flickr or photobucket :). That’s what I used to do lol. Or just upload the attachment (which takes time to approve)

11

There are plenty of free sites to upload your pics, just use google.