• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 244
  • Last Modified:

Removing White in CSS Table Borders

In my CSS the result has a white border around my colored borders. Can you please tell me how to remove the white?

Also, the center panel is supposed to be 100% tall so it is a box around the content extending to the height of the frame it's in, but notice it is only as high as the content, not as high as the browser window it was in.

 result
Here is the code, but it is also in the HTML file attached. thanks!

<table style="margin: 0px; padding: 0px; border: 1px solid #000000; width: 100%; height: 100%; text-align: center; background-color: #ffffff;" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td>
            <table style="margin: 0px; padding: 0px; border: 20px solid #efefef; width: 100%; height: 100%; text-align: center;">
                <tbody>
                    <tr>
                        <td>
                        <table style="margin: 0px; padding: 0px; border: 3px solid #006d00; width: 100%; height: 100%; text-align: center;">
                            <tbody>
                                <tr>
                                    <td style="width: 50%; height: 100% !important; text-align: center;">
                                    Testing 1 2 3
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>

Open in new window

HTMLPage.htm
0
Starr Duskk
Asked:
Starr Duskk
  • 2
2 Solutions
 
nickinthoozCommented:
Is this something that has to be a table?  Div's would work so much better and it would be more current.
0
 
nickinthoozCommented:
anyhow,  try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
    table {border-collapse: collapse;}
    td {border-collapse: collapse;}
    </style>
</head>
<body>
<table style="margin: 0px; padding: 0px; border: 1px solid #000000; width: 100%; height: 100%; text-align: center; background-color: #ffffff;" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td>
            <table style="margin: 0px; padding: 0px; border: 20px solid #efefef; width: 100%; height: 100%; text-align: center;">
                <tbody>
                    <tr>
                        <td>
                        <table style="margin: 0px; padding: 0px; border: 3px solid #006d00; width: 100%; height: 100%; text-align: center;">
                            <tbody>
                                <tr>
                                    <td style="width: 50%; height: 100%;  text-align: center;">
                                    Testing 1 2 3
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

Open in new window


As far as the height,  TD is a child of TR. TR is the child of TABLE. In order for the TD to have a height of 100%, either the TR (not recommended) or the TABLE have to have a height of 100%. Because the TD can only be 100% of the height of its parent element.
0
 
GaryCommented:
table{
border-collapse:collapse
}
td {
padding:0
}
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now