HTML Can not remove padding

Question

I usually never work with HTML and CSS so i am building a very simple HTML page by hand. I want to use a table inside a table cell , and remove all the padding between the two. I am using this very simple structure :

<style>
.takeoutmargins{
    margin: 0%;
}
</style>
<div>Site
    <table>
        <tbody>
            <tr>
                <td>&nbsp;</td>
            <td>
                <table>
                    <tbody>
                        <tr>
                            <td>1</td>
                        </tr>
                        <tr>
                            <td>2</td>
                        </tr>
                        <tr>
                            <td>3</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table class="takeoutmargins">
                    <tbody>
                        <tr>
                            <td>href1</td>
                            <td>href2</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            </tr>
        </tbody>
    </table>
    <div>&nbsp;</div>
</div>

But the padding is always there. JSFiddle either JSFIDDLE

Thanks

Does this answer your question? [Remove all padding and margin table HTML and CSS](https://stackoverflow.com/questions/16427903/remove-all-padding-and-margin-table-html-and-css) — 0stone0, Mar 22 '21 at 18:21
not sure what you trying to achieve, but a table inside a table cell is already a bad use. You should use colspan/rowspan instead. Besides of that, it seems that you try to use a table for styling purpose which would be another mistake. — tacoshy, Mar 22 '21 at 19:14

score 0 · Answer 1 · answered Mar 22 '21 at 18:16

0

.takeoutmargins td { padding: 0; }

answered Mar 22 '21 at 18:16

Nino Giovanny

51
4

score 0 · Answer 2 · answered Mar 22 '21 at 18:18

.takeoutmargins{
    margin: 0;
}

table td{
  padding:0;
}

<!DOCTYPE html>
<html>
<head>
<style>
.takeoutmargins{
    padding:0;
}
</style>
</head>
<body>
<div>Site
<table>
<tbody>
<tr>
<td>&nbsp;</td>
<td>
<table>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="takeoutmargins">
<tbody>
<tr>
<td>href1</td>
<td>href2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div>div</div>
</div>
</body>
</html>

HTML Can not remove padding

2 Answers2