使用CSS实现细边框,隔行变色,高亮选中行的表格

  • 表格是网页中的重要组成部分,下面让我们通过CSS来实现一个细边框,隔行变色,高亮选中行的表格;以便一同学习参考。

细边框表格

  1. 先来看一段HTML代码

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <style>
            table {
            
                border: 1px solid #999999;
                margin: 16px auto;
                width: 300px;
            }
    
            th {
            
                border: 1px solid #999999;
                padding: 8px 0;
            }
    
            td {
            
                border: 1px solid #999999;
                padding: 8px 0;
            }
        style>
    head>
    <body>
    <table>
        <caption>日期caption>
        <thead>
        <tr>
            <th>th>
            <th>th>
            <th>th>
        tr>
        thead>
        <tbody>
        <tr>
            <td>td>
            <td>td>
            <td>td>
        tr>
        <tr>
            <td>td>
            <td>td>
            <td>td>
        tr>
        <tr>
            <td>td>
            <td>td>
            <td>td>
        tr>
        <tr>
            <td>td>
            <td>td>
            <td>td>
        tr>
        <tr>
            <td>td>
            <td>td>
            <td>td>
        tr>
        tbody>
    table>
    body>
    html>
    
  2. 这段HTML代码在浏览器上显示如下表格:

    使用CSS实现细边框,隔行变色,高亮选中行的表格_第1张图片

  3. 可以看到上面表格的每个单元之间、单元与最外的边框之间有一个间隔,这样的表格看起来是不太美观的。那么怎么去掉这个间隔呢?通过浏览器检查table元素可以发现table的styles中有 border-spacing: 2px;这样一条样式声明。border-spacing属性是用来指定相邻单元格边框之间的距离。相当于HTML ‘cellspacing’ 属性如果我们将border-spacing`属性的值设置为0即可通过css消除表格单元格之间的间隔。

    使用CSS实现细边框,隔行变色,高亮选中行的表格_第2张图片

    使用CSS实现细边框,隔行变色,高亮选中行的表格_第3张图片

  4. 消除单元格间的间隔后,边框线条变粗了,这是由于单元格的两个边框重叠导致的。我们只要设置th、td的一半边框,table的另一半边框即可解决这问题。

    • css代码如下:

          table {
               
              border-spacing: 0;
              border-top: 1px solid #999999;
              border-left: 1px solid #999999;
              margin: 16px auto;
              width: 300px;
          }
      
          th {
               
              border-right: 1px solid #999999;
              border-bottom: 1px solid #999999;
              padding: 8px 0;
          }
      
          td {
               
              border-right: 1px solid #999999;
              border-bottom: 1px solid #999999;
              padding: 8px 0;
          }
      
    • 浏览器中的效果如下

      使用CSS实现细边框,隔行变色,高亮选中行的表格_第4张图片

实现表格的隔行变色

  1. 通过CSS3 的 :nth-child(an+b)选择器我们可以实现隔行变色的效果。:nth-child(an+b)选择器首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为表达式an+b匹配到的元素集合。(n=0,1,2,3…)

    • tr:nth-child(2n+1):匹配表格中的奇数行
    • tr:nth-child(2n):匹配表格中的偶数行
    • tr:nth-child(1):匹配表示一组兄弟元素中的第一个,且为tr的元素
  2. 实现隔行变色的CSS代码:

    /*设置表格奇数行的背景颜色*/
    tr:nth-child(2n+1) {
           
        background-color: rgba(166, 221, 53, 0.70);
    }
    
    /*设置表格偶数行的背景颜色*/
    tr:nth-child(2n) {
           
        background-color: rgba(237, 237, 237, 0.86);
    }
    
    /*设置表格th行的背景颜色*/
    thead tr:first-child {
           
        background-color: rgba(39, 153, 144, 0.91);
    }
    
  3. 浏览器中的效果:

    使用CSS实现细边框,隔行变色,高亮选中行的表格_第5张图片

实现选中行高亮

  1. 通过css的伪类 :hover可以实现将鼠标移动到表格行上的高亮效果。

  2. 实现高亮的css代码如下

    /*设置高亮*/
    tr:hover {
           
        background-color: rgba(255, 254, 200, 0.77);
    }
    
  3. 浏览器中的效果:

    使用CSS实现细边框,隔行变色,高亮选中行的表格_第6张图片

完整的代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实验title>
    <style>
        table {
      
            border-spacing: 0;
            border-top: 1px solid #999999;
            border-left: 1px solid #999999;
            margin: 16px auto;
            width: 300px;
        }

        th {
      
            border-right: 1px solid #999999;
            border-bottom: 1px solid #999999;
            padding: 8px 0;
        }

        td {
      
            border-right: 1px solid #999999;
            border-bottom: 1px solid #999999;
            padding: 8px 0;
        }

        /*设置表格奇数行的背景颜色*/
        tr:nth-child(2n+1) {
      
            background-color: rgba(166, 221, 53, 0.70);
        }

        /*设置表格偶数行的背景颜色*/
        tr:nth-child(2n) {
      
            background-color: rgba(237, 237, 237, 0.86);
        }

        /*设置表格th行的背景颜色*/
        thead tr:first-child {
      
            background-color: rgba(39, 153, 144, 0.91);
        }

        /*设置高亮*/
        tr:hover {
      
            background-color: rgba(255, 254, 200, 0.77);
        }


    style>
head>
<body>
<table>
    <caption>日期caption>
    <thead>
    <tr>
        <th>th>
        <th>th>
        <th>th>
    tr>
    thead>
    <tbody>
    <tr>
        <td>td>
        <td>td>
        <td>td>
    tr>
    <tr>
        <td>td>
        <td>td>
        <td>td>
    tr>
    <tr>
        <td>td>
        <td>td>
        <td>td>
    tr>
    <tr>
        <td>td>
        <td>td>
        <td>td>
    tr>
    <tr>
        <td>td>
        <td>td>
        <td>td>
    tr>
    tbody>
table>
body>
html>

你可能感兴趣的:(HTML,CSS,html,css3,css)