How do I get Html Table to respect margins when its width is set to 100%?

Tags: html,css

Problem :

I'm struggling to get an Html Table to fill the width of a container, and respect margins without overflowing.

This sample (see https://jsfiddle.net/v6o12u9o/) sets a table's width to 100%, but because of the margin, the table overflows its parent's borders. How do I fix this?

Html:

<div style="border: 1px solid red; margin:10px;">
<table border=1>
    <tr>
        <td>
            First cell.
        </td>
        <td>
            Second cell.
        </td>
    </tr>
</table>
</div>

Css:

table {
    margin: 20px;
    background-color: yellow;
    width:100%;
}

td {
    width: 50%;
}

Some other things I've tried:

• Setting margin-right to 40px. Margin-right is ignored.
• Setting padding-right instead. This makes the cells smaller, but the table stays at 100% width.
• Setting table's display to "block". This makes the table the correct size, but then cells are too small (I tried setting "block" on the cells, no luck)

---

Solution :

If you want table to be 100% you can do this and compensate for the margins on left and right by moving that to padding on the parent:

CSS:

.tableElement {
    margin: 20px auto;
    background-color: yellow;
    width: 100%;
}

.tableCell {
    width: 50%;
}

.tableWrapper {
    border: 1px solid red;
    margin: 10px;
    padding: 0 20px;
}

HTML:

<div class="tableWrapper">
    <table class="tableElement" border="1">
        <tr>
            <td class="tableCell">First cell.</td>
            <td>Second cell.</td>
        </tr>
    </table>
</div>

Fiddle: https://jsfiddle.net/v6o12u9o/5/