利用 colgroup保持表列宽度

 

利用 colgroup保持表列宽度，

对于表，请使用CSS属性

table-layout: fixed;

css:

.table-basic.fixed-width {

  table-layout: fixed;

}

效果如下图：

 <div class="col-md-12">
                                                    <div class="table-box">
                                                        <!-- 20200603 -->
                                                        <table class="table-basic fixed-width table-padding">
                                                            <!-- 20200603 -->
                                                            <colgroup>
                                                                <col width="80">
                                                                <col width="88">
                                                                <col width="130">
                                                                <col width="50">
                                                                <col width="150">
                                                                <col width="100">
                                                                <col width="80">
                                                                <col width="110">
                                                                <col width="60">
                                                                <col width="80">
                                                                <col width="115">
                                                                <col width="150">
                                                                <col width="150">
                                                                <col width="88">
                                                                <col width="80">
                                                            </colgroup>
                                                            <thead>
                                                                <tr>
                                                                    <th>订单来源</th>
                                                                    <th>下单时间</th>
                                                                    <th>外部订单号(SO)</th>
                                                                    <th>品牌</th>
                                                                    <th>得得条码</th>
                                                                    <th>数量</th>
                                                                    <th>核销数量</th>
                                                                    <th>发货仓库</th>
                                                                    <th>状态</th>
                                                                    <th>订单类型</th>
                                                                    <th>得得单号</th>
                                                                    <th>运营专场号</th>
                                                                    <th>库存占用订单号</th>
                                                                    <th>核销时间</th>
                                                                    <th>操作</th>
                                                                </tr>
                                                            </thead>
                                                        </table>
                                                        <!-- 20200603 -->
                                                        <table class="table-basic fixed-width table-padding">
                                                            <!-- 20200603 -->
                                                            <colgroup>
                                                                <col width="80">
                                                                <col width="88">
                                                                <col width="130">
                                                                <col width="50">
                                                                <col width="150">
                                                                <col width="100">
                                                                <col width="80">
                                                                <col width="110">
                                                                <col width="60">
                                                                <col width="80">
                                                                <col width="115">
                                                                <col width="150">
                                                                <col width="150">
                                                                <col width="88">
                                                                <col width="80">
                                                            </colgroup>
                                                            <tbody>
                                                                <tr>
                                                                    <td>
                                                                        啊啊啊啊啊啊啊
                                                                    </td>
                                                                    <td>2020-05-27 19:12:07</td>
                                                                    <td>20052581154805</td>
                                                                    <td>水水水水</td>
                                                                    <td>BBBBBBBBBD4220</td>
                                                                    <td>2</td>
                                                                    <td>2</td>
                                                                    <td>嘎嘎嘎嘎嘎嘎</td>
                                                                    <td>
                                                                        已核销
                                                                    </td>
                                                                    <td>GGGGG</td>
                                                                    <td>2100358065</td>
                                                                    <td>X20052581154805691821</td>
                                                                    <td>200525811548056918210</td>
                                                                    <td>2020-05-27 19:18:36</td>
                                                                    <td>
                                                                        <a name="soDetail" href="javascript:;"
                                                                            >
                                                                            订单详情
                                                                        </a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        啊啊啊啊啊啊啊
                                                                    </td>
                                                                    <td>2020-05-27 19:12:07</td>
                                                                    <td>20052581154805</td>
                                                                    <td>水水水水</td>
                                                                    <td>BBBBBBBBBD4220</td>
                                                                    <td>2</td>
                                                                    <td>2</td>
                                                                    <td>嘎嘎嘎嘎嘎嘎</td>
                                                                    <td>
                                                                        已核销
                                                                    </td>
                                                                    <td>GGGGG</td>
                                                                    <td>2100358065</td>
                                                                    <td>X20052581154805691821</td>
                                                                    <td>200525811548056918210</td>
                                                                    <td>2020-05-27 19:18:36</td>
                                                                    <td>
                                                                        <a name="soDetail" href="javascript:;"
                                                                            >
                                                                            订单详情
                                                                        </a>
                                                                    </td>
                                                                </tr><tr>
                                                                    <td>
                                                                        啊啊啊啊啊啊啊
                                                                    </td>
                                                                    <td>2020-05-27 19:12:07</td>
                                                                    <td>20052581154805</td>
                                                                    <td>水水水水</td>
                                                                    <td>BBBBBBBBBD4220</td>
                                                                    <td>2</td>
                                                                    <td>2</td>
                                                                    <td>嘎嘎嘎嘎嘎嘎</td>
                                                                    <td>
                                                                        已核销
                                                                    </td>
                                                                    <td>GGGGG</td>
                                                                    <td>2100358065</td>
                                                                    <td>X20052581154805691821</td>
                                                                    <td>200525811548056918210</td>
                                                                    <td>2020-05-27 19:18:36</td>
                                                                    <td>
                                                                        <a name="soDetail" href="javascript:;"
                                                                            >
                                                                            订单详情
                                                                        </a>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>