分享一下前端table表格自适应方案

久伴
久伴
久伴
643
文章
535
评论
2020年4月23日12:54:13 1 386 1229字阅读4分5秒

现在前端框架满天飞,bootstrap,mdui,meiziUI,element等等框架,使用框架自带的table类基本三二分钟就搞定一个自适应的table表格,但是实现的方案,大家了解吗

久伴在一次项目实战中,需要一个table表格,虽然没要求要自适应,但是热爱前端的久伴是个完美主义者,table当然要自适应才舒服

基本表格

分享一下前端table表格自适应方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table自适应表格</title>
</head>
<body>
    <table>
        <caption>我是表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>出生年月</th>
            </tr>
        </thead>
        <!--表内容-->
        <tbody>
            <tr>
                <td>久伴</td>
                <td>24</td>
                <td>男</td>
                <td>1996年8月22日</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

这种表格看起来就很别扭,想当然不是大家喜欢的吧

自适应表格

分享一下前端table表格自适应方案

在线预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table自适应表格</title>
    <style>
        table {
            width: 100%;
            text-align: center;
            border-spacing: 0;/**设置相邻单元格的边框间的距离**/
            border-collapse: collapse;/**边框会合并为一个单一的边框**/
            color:#5a5a5a;
            table-layout: fixed;/**固定table表格**/
        }
        table  thead {
            background-color: #d9edf7;
        }
        table td,table th{
            border:1px solid #ccc;
            overflow: hidden;/**溢出隐藏**/
            white-space: nowrap;/**不换行**/
            text-overflow: ellipsis;/**溢出不可见部分使用...代替**/


        }
    </style>
</head>
<body>
    <table>
        <caption>我是表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>出生年月</th>
            </tr>
        </thead>
        <!--表内容-->
        <tbody>
            <tr>
                <td>久伴</td>
                <td>24</td>
                <td>男</td>
                <td>1996年8月22日</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
继续阅读
久伴
css自定义a标签下划线动画效果 HTML+CSS

css自定义a标签下划线动画效果

具体效果可以通过鼠标移动到本站文章中的超链接上面查看 鼠标移动到我查看效果 效果图演示 HTML代码 <p>Lorem ipsum dolor <a class="fancy-lin...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:1   其中:访客  1   博主  0
    • 路人博客 路人博客 2

      日常互访 :grin: