CSS设置表格边框

2017-07-21 本文已影响143人公子七

题目描述：请写一个表格以及对应的CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。
刷题时看到这道，其实是想通过这道题来巩固一下对表格样式的控制。
对于如下一个表格

<table class="demo">
     <tr>
       <td>1.1</td>
       <td>1.2</td>
     </tr>
     <tr>
       <td>2.1</td>
       <td>2.2</td>
     </tr>
     <tr>
       <td>3.1</td>
       <td>3.2</td>
     </tr>
</table>

不加样式时这样子的

样式一：给 table 加 border

.demo {
      border: 1px solid #333;
 }

样式一

样式二：给 td 加 border

td {
      border: 1px solid red;
}

样式二

样式三：同时给 table 和 td 加border

.demo {
      border: 1px solid #333;
 }
 td {
      border: 1px solid red;
 }

样式四
表格同时加了两个边框，诶，为什么table的border和td的border中间会有间隔？于是引出了cellspacing这个属性。

样式四：cellspacing属性
cellspacing 属性规定单元格之间的空间。与之类似的还有cellpadding属性，但是cellpadding规定单元边沿与其内容之间的空白。
也就是说，cellspacing类似于margin，而cellpadding类似于padding。
如果我们加了这么一行

<table class="demo" cellspacing="0" cellpadding="10">

样式四

可以看出，表格各单元格边距和内容之间都有了一个10px的padding，但是还发现了另一个问题，table的border是双重的，也就是，table的border和td的border都起了作用，叠加了。
那么，我们该怎么愉快的给一个表格设置边框么？

样式五：左上border利用td标签设置，右下border利用table标签设置。

td {
      border-top: 1px solid #333;
      border-left: 1px solid #333;
  }
  .demo {
       border-right: 1px solid red;
       border-bottom: 1px solid red;
  }

样式五

哦也~搞定。
然后这道题自己贴的代码如下~

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <style type="text/css">
            td {
                border-top: 1px solid #333;
                border-left: 1px solid #333;
            }
            table {
                border-right: 1px solid #333;
                border-bottom: 1px solid #333;
            }
            tr:nth-child(odd) {
                background: #fff;
            }
            tr:nth-child(even) {
                background: gray;
            }
            tr:hover {
                background: yellow;
            }
        </style>
    </head>
    <body>
        <table cellspacing="0">
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
        </table>
    </body>
</html>

CSS设置表格边框

猜你喜欢

热点阅读