表格使用好看场景 自适应

一、需要自适应表格，就用到了表格flex布局很容易

<!--
 * @Author: Qingshan_Chen
 * @Date: 2022-04-09 23:03:53
 * @Description: 项目描述
 * @LastEditors: Qingshan_Chen
 * @LastEditTime: 2022-04-11 08:08:09
 * @FilePath: \qyzs\table.html
-->
<!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"> -->
    //移动端使用大小
    <meta name="viewport" content="width=750,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <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>
                <th>表格</th>
            </tr>
        </thead>
        <tbody>
            <tr class="pure-table-odd">
                <td>1</td>
                <td>罗分明博客</td>
                <td>http://www.luofenming.com</td>
                <td>9</td>
                <td>中国</td>
                <td><button>按钮</button></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>

 

posted @ 2022-04-11 08:10  cc-front  阅读(98)  评论(0)    收藏  举报