JSFiddle - React, Tailwind, and code Playground

by philphil

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<h3><code>colgroup</code> and <code>col</code> Behavior</h3>

<p><code>col</code>'s get proportional amount of width of table</p>
<table class="table">
    <colgroup>
        <col class="first col-sm-1" />
        <col class="second col-sm-1" />
    </colgroup>
    <thead>
        <th>Col_1</th>
        <th>Col_2</th>
    </thead>
    <tbody>
        <tr>
            <td>Row_1_Val_1</td>
            <td>Row_1_Val_2</td>
        </tr>
        <tr>
            <td>Row_2_Val_1</td>
            <td>Row_2_Val_2</td>
        </tr>
    </tbody>
</table>
<p>Here, the 2nd <code>col</code> is fixed width, but the first is not. The result is the second does not stretch while the first stretches to fill the table width.</p>
<table class="table">
    <colgroup>
        <col class="one" span="1" />
        <col class="two" span="1" />
    </colgroup>
    <thead>
        <th>Col_1</th>
        <th>Col_2</th>
    </thead>
    <tbody>
        <tr>
            <td>Row_1_Val_1</td>
            <td>Row_1_Val_2</td>
        </tr>
        <tr>
            <td>Row_2_Val_1</td>
            <td>Row_2_Val_2</td>
        </tr>
    </tbody>
</table>
<p>Here, the 2nd <code>col</code> is again fixed width, but the first and third are not. The result is the second does not stretch while the first and third stretch equal amounts to fill the remaining table width.</p>
<table class="table">
    <colgroup>
        <col class="uno" span="1" />
        <col class="dos" span="1" />
        <col class="tres" span="1" />
    </colgroup>
    <thead>
        <th>Col_1</th>
        <th>Col_2</th>
        <th>Col_3</th>
    </thead>
    <tbody>
        <tr>
            <td>Row_1_Val_1</td>
            <td>Row_1_Val_2</td>
            <td>Row_1_Val_2</td>
        </tr>
        <tr>
            <td>Row_2_Val_1</td>
            <td>Row_2_Val_2</td>
            <td>Row_1_Val_2</td>
        </tr>
    </tbody>
</table>

CSS

.first {
    width: 100px;
    background-color: lightgray;
}

.second {
    width: 200px;
    background: gray;
}
.one {
    background-color: lightgray;
}

.two {
    width: 115px;
    background: gray;
}

.uno {
    background-color: lightgray;
}
.dos {
    width: 150px;
    background: gray;
}
.tres {
}