Stretching self-sizing elements to 100%

Comparision of setting a self-sizing element's width (such as <table> or <img>) using `width:100%` vs `left, right:0`

by Lucas Krause

HTML

<div class="a">
    <table class="b">
        <thead>
            <tr>
                <th>col #1</th>
                <th>col #2</th>
                <th>col #3</th>
                <th>col #4</th>
                <th>col #5</th>
                <th>col #6</th>
                <th>col #7</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>row #1: col#1</td>
                <td>row #1: col#2</td>
                <td>row #1: col#3</td>
                <td>row #1: col#4</td>
                <td>row #1: col#5</td>
                <td>row #1: col#6</td>
                <td>row #1: col#7</td>
            </tr>
            <tr>
                <td>row #2: col#1</td>
                <td>row #2: col#2</td>
                <td>row #2: col#3</td>
                <td>row #2: col#4</td>
                <td>row #2: col#5</td>
                <td>row #2: col#6</td>
                <td>row #2: col#7</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.a {
    width:200px;
    height:200px;
    background:#eee;
    position:relative;
}
.b {
    position:absolute;
    /** /
    width:100%;
    /*/
    left:0;
    right:0;
    /**/
    /** /table-layout:fixed;/**/
    background-color:rgba(0,0,0,.1);
}

JavaScript

/*
Die Methode ein absolut positioniertes Element auf die komplette Höhe oder Breite seines OffsetParents zu strecken ohne, dass einem dabei der padding oder die border in die Quere kommt, wie es z.B. bei einer Anwendung von `width:100%` der Fall sein kann, ohne aber dabei `box-sizing:border-box` zu benutzen, mithilfe von `top:0`, `bottom:0`, `left:0`, `right:0` laesst sich quasi ueberall anwenden. Eine Ausnahme bilden Elemente die ihre Dimensionen selber bestimmen, wie z.B. `<table>` und `<img>`.
*/