HTML+CSS宽度自适应表格实例 – NA博客

HTML+CSS宽度自适应表格实例

在做一些简单展示功能的时候,会经常用到这种表格自适应的功能,有时候又不想引用bootstrap这些表格框架,所以就需要用纯CSS进行样式的设定,下面会把代码和效果图都贴出来,给需要的小伙伴一个参考,如有其他方案可以在文章下方留言哦。

效果展示:

实例代码:


<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>Table_Simple CSS for HTML tables</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <style type="text/css">
        .pure-table {
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #cbcbcb;
            width: 100%;
        }
 
            .pure-table caption {
                color: #000;
                font: italic 85%/1 arial,sans-serif;
                padding: 1em 0;
                text-align: center;
            }
 
            .pure-table td, .pure-table th {
                border-left: 1px solid #cbcbcb;
                border-width: 0 0 0 1px;
                font-size: inherit;
                margin: 0;
                overflow: visible;
                padding: 0.1em 0.1em;
                background-color: transparent;
                word-break: break-all;
            }
 
            .pure-table thead {
                background-color: #e0e0e0;
                color: #000;
                text-align: left;
                vertical-align: bottom;
            }
 
        .pure-table-odd td {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
 
    <table class="pure-table">
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>url</th>
                <th>sort</th>
                <th>country</th>
            </tr>
        </thead>
        <tbody>
            <tr class="pure-table-odd">
                <td>1</td>
                <td>NA博客</td>
                <td>https://www.newadmin.cn</td>
                <td>9</td>
                <td>中国</td>
            </tr>
            <tr>
                <td>2</td>
                <td>淘宝<br /> </td>
                <td>https://www.taobao.com</td>
                <td>5</td>
                <td>中国</td>
            </tr>
            <tr class="pure-table-odd">
                <td>3</td>
                <td>google</td>
                <td>https://www.google.cm/</td>
                <td>11</td>
                <td>美国</td>
            </tr>
            <tr>
                <td>4</td>
                <td>95网络</td>
                <td>http://www.995w.com</td>
                <td>3</td>
                <td>中国</td>
            </tr>
            <tr class="pure-table-odd">
                <td>5</td>
                <td>Facebook</td>
                <td>https://www.facebook.com</td>
                <td>8</td>
                <td>美国</td>
            </tr>
        </tbody>
    </table>
 
</body>
</html>

清风

心中有梦想就要一如既往,不能遇到困难说放弃就放弃,千锤百炼才能磨炼出好钢,饱经风霜才能更强。

相关推荐

2 条评论

  1. 阿里舞台

    有句话叫不明觉厉,这些自适应代码看不懂,我有时候需要了也是使用在线编辑器去做表格,然后复制html代码。

    • 清风

      不瞒你说,我也喜欢用在线编辑器,比较方便快捷。代码备个份,以备不时之需罢了。

发表评论

您的电子邮箱地址不会被公开。



微信扫一扫,分享到朋友圈

HTML+CSS宽度自适应表格实例
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close