SOURCE

<!-- 1. 普通表格 -->
<div class="m-table">
    <table>
        <caption>表格标题</caption>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容长短不一</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>系统自己控制每列宽度</td>
        </tr>
        <tr>
            <td colspan="2">使用 colspan 占据多列</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td rowspan="2">使用 rowspan 占据多行</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>
    </table>
</div>



<!-- 2. 定宽的表格 -->
<div class="m-table table-fixed">
    <table>
        <caption>定宽的表格</caption>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>自动折行，不会挤占其它列的空间。自动折行，不会挤占其它列的空间。自动折行，不会挤占其它列的空间。</td>
            <td>内容长短不一</td>
            <td>不管每列内容多少</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>系统自动平分剩余空间</td>
        </tr>
    </table>
</div>



<!-- 3. 某一列自适应宽的表格 -->
<div class="m-table table-fixed">
    <table>
        <caption>某一列自适应宽的表格</caption>
        <tr>
            <th width="100">表头</th>
            <th width="100">表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容长短不一</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>如果其它列定宽</td>
            <td>剩余一列就会自适应剩余空间</td>
        </tr>
    </table>
</div>



<!-- 4. caption 可以放很多东西 -->
<div class="m-table table-fixed">
    <table>
        <caption>
            <div class="r">
                <button>按钮</button>
            </div>
            <h3>caption 可以放很多东西 →</h3>
        </caption>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
    </table>
</div>

.m-table { margin: 20px; background-color: #fff; }
    /* 表格 */
    .m-table table { width: 100%; border: 1px solid #ddd; }
    .m-table.table-fixed table { table-layout: fixed; }
        /* 表格整体的标题 */
        .m-table caption { padding: 5px; border: solid #03a9f4; border-width: 1px 1px 0; background: #03a9f4; color: #fff; }
        /* 表格单元格 */
        .m-table th, .m-table td { padding: 5px; border: 1px solid #ddd;; }
        .m-table th { background-color: #eee; }