CODEWITHSUNDEEP
csscolorshtml-table
mseifert
mseifert

Reputation: 5670

Background color of table showing through around <td> elements

I have a table within a table. I have set table background-color to white.

The inner table's background is to remain white while all other cells of the outer table are set to lightgrey.

However, the outer table's white background-color is showing up as a border around all its <td> cells which I cannot figure out how to get rid of - all grey cells should be borderless. I have tried setting the border property of all elements to none without success. Any help would be appreciated.

Here is a jsfiddle

<style>
body{
    background-color: lightcyan;
}
.gems {
    margin:0 8px; 
    padding:0; 
}
.gems table{
    width:100%;
    background-color:white;
}
.gems td {
    padding:0px 1px; 
    margin:0;
}
.gems tr.filelist {
    margin:5px;
    background-color: lightgrey;
}
.gems tr.tools {
    background-color: lightgrey;
}

div.textarea  {
    background-color: white;
}

</style>
<body>
<div class="gems">
    <table>
    <tr class="filelist">
        <td>filelist</td>
        <td>filelist</td>
    </tr>
    <tr class="tools">
        <td>tools</td>
        <td>
        <div class="textarea">
        This is a table
            <table>
            <tr>
            <td>Cell 1</td>         
            <td>Cell 2</td>         
            <td>Cell 3</td>         
            </tr>
            </table>
            </div>
        </td>
    </tr>
    </table>
</div>

</body>

Upvotes: 0

Views: 2001

Answers (1)

jonathanGB
jonathanGB

Reputation: 1540

<table cellspacing="0">

Add this property in your table tag.

Upvotes: 2

Related Questions