CODEWITHSUNDEEP
htmlhtml-table
Urbycoz
Urbycoz

Reputation: 7421

Making a div fill a table cell in HTML5

I've got a div inside an HTML table cell, but I can't get it to fill the whole cell.

<body style="background-color: ButtonFace;">
        <form id="form1" runat="server">
            <table border="1" style="border-collapse:collapse; border-color:Red;">
                <tr>
                    <td>
                        <div style="border:solid 1px green;background-color: Yellow;">
                            test
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </body>

It has a gap, where the (grey) background shows through.

enter image description here

I'm sure it must be really easy to remove it, but I just can't figure out how.

Upvotes: 0

Views: 1414

Answers (3)

mnmnc
mnmnc

Reputation: 374

Please apply 

padding:0;

To the td

Or you may try to use

border-spacing

Upvotes: 1

Nick
Nick

Reputation: 11

You need to add "cellpadding" for the table and set it to "0"

<body style="background-color: ButtonFace;">
    <form id="form1" runat="server">
        <table cellpadding="0" border="1" style="border-collapse:collapse; border-color:Red;">
            <tr>
                <td >
                    <div style="border:solid 1px green;background-color: Yellow;">
                        test
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>

-Nick

Upvotes: 1

user1122857
user1122857

Reputation:

you have to set padding 0 for TD

 <body style="background-color: ButtonFace;">
            <form id="form1" runat="server">
                <table border="1" style="border-collapse:collapse; border-color:Red;">
                    <tr>
                        <td style="padding:0px"> <-- Change
                            <div style="border:solid 1px green;background-color: Yellow;">
                                test
                            </div>
                        </td>
                    </tr>
                </table>
            </form>
        </body>

Upvotes: 1

Related Questions