remove space between two td elements in a table

Question

I have a table with one tr & 2 tds. The 2 td's have tables. There is space between the 2 inner tables, which I don't want. Can someone suggest me how to remove this spacing. Here is my mark up:

 <table style="border-spacing: 0; border-width: 0; padding: 0; border-width: 0;">
    <tr>
        <td>
            <table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
                <tr>
                    <td>Subscriber Name: </td>
                    <td>
                        <input type="text" id="Text1" /></td>
                </tr>
                <tr>
                    <td>Subscriber Id: </td>
                    <td>
                        <input type="text" id="Text2" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="button" id="Button1" /></td>
                </tr>
            </table>
        </td>
        <td>
            <table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
                <tr>
                    <td>Admin Name: </td>
                    <td>
                        <input type="text" id="Text3" /></td>
                </tr>
                <tr>
                    <td>Admin Id:</td>
                    <td>
                        <input type="text" id="Text4" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="button" id="Button2" /></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

score 9 · Accepted Answer · edited Oct 08 '14 at 09:17

You need to set the padding of the cells themselves to 0. They do not inherit the padding of the table element.

<table style="border-spacing: 0; border-width: 0; padding: 0; border-width: 0;">
<tr>
    <td style="padding-right: 0px;">
        <table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
            <tr>
                <td>Subscriber Name: </td>
                <td>
                    <input type="text" id="Text1" /></td>
            </tr>
            <tr>
                <td>Subscriber Id: </td>
                <td>
                    <input type="text" id="Text2" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" id="Button1" /></td>
            </tr>
        </table>
    </td>
    <td style="padding-left: 0px;">
        <table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
            <tr>
                <td>Admin Name: </td>
                <td>
                    <input type="text" id="Text3" /></td>
            </tr>
            <tr>
                <td>Admin Id:</td>
                <td>
                    <input type="text" id="Text4" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" id="Button2" /></td>
            </tr>
        </table>
    </td>
</tr>

you added style="padding-left: 0px;" to td elements of outer table, I thought I don't need to do it, as I have padding: 0; in the table itself. However, seeing your answer, I tried it & it worked out. Thanks — Rasmita Dash, Oct 08 '14 at 09:09

Alex Char · Answer 2 · 2017-04-13T11:57:00.763

You can simple use:

table {
    border-collapse: collapse;
}

table{
    border-collapse: collapse;
}

<table>
    <tr>
        <td>
            <table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
                <tr>
                    <td>Subscriber Name: </td>
                    <td>
                        <input type="text" id="Text1" /></td>
                </tr>
                <tr>
                    <td>Subscriber Id: </td>
                    <td>
                        <input type="text" id="Text2" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="button" id="Button1" /></td>
                </tr>
            </table>
        </td>
        <td>
            <table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
                <tr>
                    <td>Admin Name: </td>
                    <td>
                        <input type="text" id="Text3" /></td>
                </tr>
                <tr>
                    <td>Admin Id:</td>
                    <td>
                        <input type="text" id="Text4" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="button" id="Button2" /></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

By using border-collapse I am loosing the rounded borders, I don't know why. Infact, My table is in a div inside which border-collapse is made for all tables, so I am overriding it with border-collapse:initial to get rounded border — Rasmita Dash, Oct 08 '14 at 09:20

score 4 · Answer 3 · answered Oct 08 '14 at 08:42

4

include cellpadding="0" cellspacing="0" in the table tag

HTML

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
</table>

Fiddle Demo

answered Oct 08 '14 at 08:42

Aru

1,840
1
12
15

2

`cellspacing` and `cellpadding` are obsolete in html5. – Alex Char Oct 08 '14 at 08:49
cellpadding="0" cellspacing="0" in table tag are absolete, however I am doing the same with style="border-spacing: 0; border-width: 0; padding: 0; border-width: 0;" – Rasmita Dash Oct 08 '14 at 09:04
@Alex check this http://stackoverflow.com/questions/2414773/is-it-ok-to-use-cellpadding-2-cellspacing-2-in-table, even that is obsolete, we can use.. – Aru Oct 08 '14 at 09:04
@RasmitaDash, else we can update "table {border-collapse: collapse;} td {padding: 0px;}" – Aru Oct 08 '14 at 09:07
I know we can use it but is obsolete :) Btw i didn't downvote. – Alex Char Oct 08 '14 at 09:08
not an issue, we can use "table {border-collapse: collapse;} td {padding: 0px;}" – Aru Oct 08 '14 at 09:09

remove space between two td elements in a table

3 Answers3

Linked