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

2021-10-12

在做一些简单展示功能的时候，会经常用到这种表格自适应的功能，有时候又不想引用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>网络小屋</td>
                <td>https://www.networkcabin.com</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>

版权声明：
作者：兴兴
文章：HTML+CSS宽度自适应表格实例
链接：https://www.networkcabin.com/notes/2574
文章版权归本站所有，未经授权请勿转载。

THE END