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
LVL 2
Starr DuskkASP.NET VB.NET DeveloperAsked:
Who is Participating?
 
nickinthoozConnect With a Mentor Commented:
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
 
nickinthoozCommented:
Is this something that has to be a table?  Div's would work so much better and it would be more current.
0
 
GaryConnect With a Mentor Commented:
table{
border-collapse:collapse
}
td {
padding:0
}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.