[JavaScript知识库]【前端】table表格适配等样式问题

使用table标签写表格

/*最外围的，固定最大宽度和横向滚动条*/
.table-outer {
    max-width: 100%;
    overflow-x: auto;
}
.table {
   min-width: 710px;
   border: 1px solid #000;
   border-collapse: collapse; /*边框塌陷，两条并成一条*/
   font-size: 14px; /*限制字体*/
}
    .table tr th {
        border-left: 1px solid #000;
        border-top: 1px solid #000;
        background-color: #4c7df4;
    }
    .table td {
        border-left: 1px solid #000;
        border-top: 1px solid #000;
    }
   
   <div class="table-outer">
        <table class="table">
            <tr>
                <th style="width: 10%">名称</th>
                <th style="width: 30%">第二列</th> //固定列的宽度
            </tr>
            <tr>
                <td>有</td>
                <td>无</td>
            </tr>
        </table>
    </div>

展示：

ps:代码只写了两列，但是上面有5列

完结撒花~