Solved

Removing White in CSS Table Borders

Posted on 2013-02-07
3
232 Views
Last Modified: 2013-02-07
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
Comment
Question by:Starr Duskk
  • 2
3 Comments
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38866459
Is this something that has to be a table?  Div's would work so much better and it would be more current.
0
 
LVL 6

Accepted Solution

by:
nickinthooz earned 450 total points
ID: 38866491
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 50 total points
ID: 38866581
table{
border-collapse:collapse
}
td {
padding:0
}
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question