CSS 仅显示垂直线的表格

在本文中，我们将介绍如何使用CSS创建一个只显示垂直线的表格。

阅读更多：CSS 教程

如何创建表格

我们可以使用HTML的<table>元素来创建表格，在表格中使用<tr>来定义行，在行中使用<td>来定义单元格。以下是一个简单的表格示例：

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

添加样式

要使表格只显示垂直线，我们可以使用CSS来设置单元格的边框样式。通过设置border-collapse属性为collapse，可以将表格的边框合并为单一线条。然后，我们可以使用border-right属性来添加垂直线条的样式。以下是CSS代码示例：

table {
  border-collapse: collapse;
}

td {
  border-right: 1px solid black;
  padding: 10px;
}

在上面的代码中，我们将表格的边框合并，并将单元格的右边框设置为1像素的黑色实线，同时设置了单元格的内边距为10像素。

示例

让我们来看一个完整的示例，使用上述CSS样式创建一个只显示垂直线的表格：

<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
        border-collapse: collapse;
      }

      td {
        border-right: 1px solid black;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>名称</td>
        <td>价格</td>
        <td>数量</td>
      </tr>
      <tr>
        <td>苹果</td>
        <td>1.99</td>
        <td>10</td>
      </tr>
      <tr>
        <td>橙子</td>
        <td>0.99</td>
        <td>5</td>
      </tr>
      <tr>
        <td>香蕉</td>
        <td>0.59</td>
        <td>8</td>
      </tr>
    </table>
  </body>
</html>