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/


    CSS Howto..

    How can I get two buttons and textareas from separate forms to display inline?

    How to place my dropdown CSS menu bar on top of my jQuery picture rotator?

    How to place divs one next to another without floatant?

    How to make horizontal lines with words in the middle using CSS?

    How to create one UL menu similar to another

    How to check for text created by CSS?

    How to make one list-item in menu higher than the others with CSS?

    How do I require an HTML document (webpage) to be a certain size, or use scroll bars

    How do I make two divs in the same “row” float in different directions?

    How to change css class for the inputfield and label when validation fails?

    How do I remove white space INSIDE CSS border? I want the border to be tight around the text

    Internet Explorer: how to escape extra carriage return after editing Textarea?

    How to style the arrow that opens submenus in jQuery mmenu?

    How to use vertical align in bootstrap

    If div is visible, than show that content in other div with jQuery

    How to write specific CSS for mozilla, chrome and IE

    How to exclude inner webelement with css selectors?

    How to use random array output as a for-loop CSS attribute in jQuery

    How to change a scrolling element behavior on resize? (HTML, CSS, JavaScript) [duplicate]

    How can I ensure that my absolutely positioned div is tall enough to meet my sticky footer?

    How to create a header which fills the background with a color throughout the width

    How to override bootstrip.min.css in Joomla-Template CSS file for width 768-1140px

    HTML CSS, how to create a Side bar or column

    Css Drop down menu, how to keep menu infront of content

    How to achieve a left and right background split leaving middle div visible?

    How do you override CSS applied by jQuery UI theme properly?

    CSS: How to make an input box stretch to the width of its given absolute position left and right value?

    how do i make the “box-shadow” to the whole div

    How can I position a form with controls over a Google Map?

    How can I make a different CSS for the first child
    ?