让Table的TD有边框而Table右左没有边框的CSS样式

如果要让表格(Table)中的TD有边框(Border)，而Table的左右两侧没有边框，可以使用以下的CSS样式：

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

table td:first-child {
  border-left: none;
}

table td:last-child {
  border-right: none;
}

分析：

首先，使用 border-collapse: collapse; 属性可以去除表格默认的边框，使得后续我们自定义的边框样式更加灵活。

然后，使用 td 元素的 border 属性，可以为每个单元格设置统一的边框样式，这里我们设置为黑色的实线边框，宽度为 1px。

但是，这样设置后，整个表格的左右两侧也会有边框，这时候，我们要使用 :first-child 和 :last-child 伪类来对第一列和最后一列分别设置去左边框和去右边框样式，例如 table td:first-child { border-left: none; } 可以去掉第一列的左侧边框，table td:last-child { border-right: none; } 可以去掉最后一列的右侧边框。

下面是两个应用示例：

在HTML中使用样式表定义：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Table样式示例</title>
    <style>
      table {
        border-collapse: collapse;
      }
      td {
        border: 1px solid black;
      }
      table td:first-child {
        border-left: none;
      }
      table td:last-child {
        border-right: none;
      }
    </style>
  </head>
  <body> 
    <table>
      <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>20岁</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>25岁</td>
        <td>女</td>
      </tr>
    </table>
  </body>
</html>

在CSS中为指定的Table类名定义：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Table样式示例2</title>
    <style>
      .mytable {
        border-collapse: collapse;
      }
      .mytable td {
        border: 1px solid black;
      }
      .mytable td:first-child {
        border-left: none;
      }
      .mytable td:last-child {
        border-right: none;
      }
    </style>
  </head>
  <body> 
    <table class="mytable">
      <tr>
        <td>名称</td>
        <td>价格（元）</td>
        <td>库存</td>
      </tr>
      <tr>
        <td>苹果</td>
        <td>5.00</td>
        <td>100</td>
      </tr>
      <tr>
        <td>香蕉</td>
        <td>3.50</td>
        <td>150</td>
      </tr>
       <tr>
        <td>橙子</td>
        <td>4.00</td>
        <td>80</td>
      </tr>
    </table>
  </body>
</html>

使用这种方式，我们可以给HTML中的不同Table类名加不同的样式，以满足不同的设计需求。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：让Table的TD有边框而Table右左没有边框的CSS样式 - Python技术站

让Table的TD有边框而Table右左没有边框的CSS样式

相关文章