Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make this table only 1 pixel border?

I have this table:

image oftable

With the following code:

    <table border="1" id="comparativa">
        <tr>
            <td rowspan="2"></td>
            <td colspan="3" class="friuty">Fruity</td>
        </tr>
        <tr>
            <td class="lila">Intensed</td>
            <td class="lila">Medium</td>
            <td class="lila">Low</td>
        </tr>
        <tr>
            <td class="lila">Green</td>
            <td><img src="img/forsutpeque.png" /></td>
            <td><img src="img/donapeque.png" alt="" /></td>
            <td>-</td>
        </tr>
        <tr>
            <td class="lila">Mellow</td>
            <td>-</td>
            <td><img src="img/marpeque.png" alt="" /></td>
            <td>-</td>
        </tr>
        <tr>
            <td class="lila">Balanced</td>
            <td>-</td>
            <td><img src="img/cotxepeque.png" alt="" /></td>
            <td>-</td>
        </tr>
    </table>

and the following CSS

#comparativa { 
    width:350px; 
    font-size:1.2em; 
    border-spacing:0px; 
    border-collapse:separate; 
    empty-cells:hide !important; 
    border:0; 
}
#comparativa tr td { 
    padding:2px 4px; 
    border:#9f4dc2 solid 1px; 
    text-align:center; 
    width:88px; 
    color:#bdac77; 
}
#comparativa tr td.friuty { 
    background:#9f4dc2; 
    color:#fff; 
    text-transform:uppercase; 
}
#comparativa tr td.lila { 
    background:#ecdff3; 
    text-transform:uppercase;  
    color:#9f4dc2; 
    text-align:left; 
    padding-top:2px; 
    padding-bottom:4px; 
    padding-left:10px; 
}

I want to make it's inner borders 1px width while still keeping the empty top-left cell without showing the borders:

The problem is that if I put border-collapse:collapse then the top-left row appears with its border, even with the empty-cells:hide...

Any suggestion?

like image 806
Aleix Avatar asked Aug 09 '12 17:08

Aleix


People also ask

How can one draw the border on a table?

Click the table or select the cells where you want to add or change borders. On the Tables tab, under Draw Borders, on the Line Style pop-up menu, click the line style that you want. On the Tables tab, under Draw Borders, click Borders, and then click the borders that you want.

How do you adjust table borders?

Go to Table Tools >Design > Table Styles > Borders, and then click the border option that you want to change.

How do I remove a double border in HTML?

Best solution : Use border-collapse:collapse; for the <table> element.

What 3 types of border styles can a table have?

border-bottom-style. border-left-style. border-right-style.


2 Answers

You can specify override style for top left cell, using:

#comparativa tr:first-child td:first-child { border-left: 0; border-top: 0; }
like image 143
Edward Ruchevits Avatar answered Oct 07 '22 13:10

Edward Ruchevits


Like so?

http://jsfiddle.net/apJkX/

like image 1
Kwon Avatar answered Oct 07 '22 15:10

Kwon