zoukankan      html  css  js  c++  java
  • 九宫格表格样式

    业务中真是各种需求都有,例如如何使用CSS绘制一个九宫格表格,不要外边框。

     1 <!DOCTYPE html>
     2 <html lang="zh-CN">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Document</title>
     8     <style>
     9         html, body {
    10             height: 100%;
    11             margin: 0;
    12             padding: 0;
    13         }
    14 
    15         table {
    16             border-collapse:collapse;
    17             width: 100%;
    18             height: 100%;
    19             text-align: center;
    20         }
    21 
    22         td {
    23             border: 1px solid black;
    24         }
    25 
    26         tr:first-child > td {
    27             border-top: none;
    28         }
    29 
    30         tr:last-child > td {
    31             border-bottom: none;
    32         }
    33 
    34         tr > td:first-child {
    35             border-left: none;
    36         }
    37 
    38         tr > td:last-child {
    39             border-right: none;
    40         }
    41     </style>
    42 </head>
    43 <body>
    44     <table>
    45         <thead></thead>
    46         <tbody>
    47             <tr>
    48                 <td>1</td>
    49                 <td>2</td>
    50                 <td>3</td>
    51             </tr>
    52             <tr>
    53                 <td>4</td>
    54                 <td>5</td>
    55                 <td>6</td>
    56             </tr>
    57             <tr>
    58                 <td>7</td>
    59                 <td>8</td>
    60                 <td>9</td>
    61             </tr>
    62         </tbody>
    63     </table>
    64 </body>
    65 </html>

    运行效果:

  • 相关阅读:
    网络七层模型
    border-radius 50% 和100%
    数据绑定
    前端一些基础的重要的知识2
    用 ul 和 li 模拟select控件
    两列布局
    盒子的水平垂直居中几种方法
    TCP时间戳
    帧聚合
    skb buff数据结构
  • 原文地址:https://www.cnblogs.com/viewts/p/11242528.html
Copyright © 2011-2022 走看看