表格简单原生css样式

原生css表格样式：

样式一：

        table {
            border: 1px solid #e6e6e6;
            border-collapse: collapse;
            border-spacing: 1px;
        }

        th,
        td {
            border: 1px solid #e6e6e6;
            padding: 8px 16px;
            text-align: left;
        }

        th {
            background-color: #eff3f5;

        }

        table tr td {
            word-break: break-all;
        }

        tr:nth-child(odd) {
            background-color: #f5f6f7;
        }

样式二：

        table{
            border: 1px solid #e6e6e6;
            border-collapse: collapse;
            border-spacing: 1px;
        }
        th,td{
            border: 1px solid #e6e6e6;
            padding: 8px 16px;
            text-align: left;
        }
        th{
            background-color: #a9a9a9;

        }
        table tr td{
            word-break: break-all;
        }

实例一：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap 101</title>
    <link rel="stylesheet" href="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
    <style>
        table {
            border: 1px solid #e6e6e6;
            border-collapse: collapse;
            border-spacing: 1px;
        }

        th,
        td {
            border: 1px solid #e6e6e6;
            padding: 8px 16px;
            text-align: left;
        }

        th {
            background-color: #eff3f5;

        }

        table tr td {
            word-break: break-all;
        }

        tr:nth-child(odd) {
            background-color: #f5f6f7;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>aa</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>22</td>
            <td>bb</td>
        </tr>
    </table>

</body>

</html>

实例二：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap 101</title>
    <link rel="stylesheet" href="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
    <style>
        table {
            border: 1px solid #e6e6e6;
            border-collapse: collapse;
            border-spacing: 1px;
        }

        thead {
            border-bottom: 3px solid;
        }

        th,
        td {
            border: 1px solid #e6e6e6;
            padding: 8px 16px;
            text-align: left;
        }


        table tr td {
            word-break: break-all;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td>张三</td>
                <td>18</td>
                <td>aa</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>22</td>
                <td>bb</td>
            </tr>
        </tbody>
    </table>

</body>

</html>

本篇完，还有疑问？留下评论吧

发表评论 取消回复

发表评论取消回复