Solved

Removing White in CSS Table Borders

Posted on 2013-02-07
3
224 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:BobCSD
  • 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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

747 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now