Question

I’ve pasted table code to new div in gridContainer div (using the Fluid Grid Layout option)
Everything seems fine but the cell spacing defined, when I try to change the spacing nothing happens, it keeps it on 0.

Following is the table markup:

<table align="center" cellpadding="0" cellspacing="15">
    <col span="7" width="160px" />
    <row span="7" width="160px" />
    <!---Row 1--->  
    <tr align="center"  height="160px">
        <td colspan="2" >
            <img src="images/buttons/Optimus.png" />
            </td>
        <td colspan="2" >
            <img src="images/buttons/MapleSim.png">
            </td>
        <td colspan="2" >
            <a href="content/maple.html" ><img src="images/buttons/Maple.png"></a>
            </td>
        <td colspan="1" bgcolor="#40b040">
            <img src="images/buttons/about_us.png">
            </td>
    </tr>

    <!---Row 2--->  
    <tr align="center"  height="160px">
        <td colspan="2" bgcolor="#40b040">
            <img src="images/buttons/QFD.white.png">
            </td>
        <td colspan="1" bgcolor="#cc00cc">
            <img src="images/buttons/learning_maple.png">
            </td>
        <td colspan="3" rowspan="2" 
            align="left" valign="top" bgcolor="#aaaaff">
            <img src="images/buttons/news.png">                 
            News will be shown here
            </td>
        <td colspan="1" bgcolor="#ff0000">
            <img src="images/buttons/services.png">
            </td>
    </tr>

    <!---Row 3--->  
    <tr align="center"  height="160px">
        <td colspan="1" bgcolor="#6766cc">
            <img src="images/buttons/events.png">
            </td>
        <td colspan="1" bgcolor="#cccc00">
            <img src="images/buttons/forum.png">
            </td>
        <td colspan="1" bgcolor="#4040ff">
            <img src="images/buttons/links.png">
            </td>
        <td colspan="1" bgcolor="#ffbf00">
            <img src="images/buttons/shopping_cart.png">
            </td>
    </tr>

    <!---Row 4--->  
    <tr align="center"  height="160px">
        <td colspan="2" bgcolor="#ff0000">
            <img src="images/buttons/commercial_users.png">
            </td>
        <td colspan="1" bgcolor="#ffbf00">
            <img src="images/buttons/student_special.png">
            </td>
        <td colspan="1" bgcolor="#40b000">
            <img src="images/buttons/student_special.png">
            </td>
        <td colspan="1" bgcolor="#ff00cc">
            <img src="images/buttons/instruction.png">
            </td>
        <td colspan="1" bgcolor="#cc00cc">
            <img src="images/buttons/learning_maple.png">
            </td>
        <td colspan="1" bgcolor="#4040ff">
            <img src="images/buttons/download.png">
            </td>
    </tr>
</table>

You can see in this line <table align="center" cellpadding="0" cellspacing="15"> the spacing is 15, but when checking on any browser it shows as it set to 0

Any ideas how to solve it?

Thanks in advance,
Shahar

Answer 1

Ok, I guess I was too hasty.

It appears that the table used two definitions from boilerplate.css

table {
    /* [disabled]border-collapse: collapse; */
    /* [disabled]border-spacing: 0; */
}

As you can see, simply disabling them resolved the issue.
If there is any other option to override without disabling (maybe usage of !important) I’ll be glad to know about it.