一个好看的表格，拿走不谢

最新推荐文章于 2024-12-25 01:07:53 发布

跟着宇哥学前端

最新推荐文章于 2024-12-25 01:07:53 发布

阅读量3.6k

点赞数 6

分类专栏： html css 文章标签： html css html5

本文链接：https://blog.csdn.net/asdfgh1129/article/details/105809800

版权

html 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

一个好看的表格，拿走不谢

效果图
在这里插入图片描述

<div class="tablebox">
    <table id="tableId" border="0" cellspacing="0" cellpadding="0">
        <thead>
        <tr>
            <th>序号</th>
            <th>单位名称</th>
            <th>缺口岗位</th>
            <th>缺口数量</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>北京天安信**科技有限公司</td>
            <td>人事专员</td>
            <td>6</td>
        </tr>
        <tr>
            <td>2</td>
            <td>石家庄**科技有限公司</td>
            <td>市场营销</td>
            <td>6</td>
        </tr>
        </tbody>
    </table>
</div>

table, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
    color: #fff;
}

.tablebox table {
    border-collapse: separate;
    border-spacing: 1px
}

.tablebox {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 10px auto;
}

.tablebox table {
    width: 100%;
}

.tablebox table th, .tablebox table td {
    font-size: 12px;
    text-align: center;
    line-height: 16px;
    background: #3754a2;
    padding: 12px;
}

.tablebox table th {
    height: 30px;
    line-height: 30px;
    background: #6271bd;
    font-size: 14px;
    font-weight: normal;
}

.tablebox table td img {
    display: inline-block;
    vertical-align: middle;
}

.tablebox.table_md table td, .tablebox.table_md table th {
    line-height: 18px;
}

@前端学前班（同抖音）