时间戳

首页 > 解决方案 > 如何在空白处开发带有水平边框的表格

html - 如何在空白处开发带有水平边框的表格

问题描述

在此处输入图像描述

我想在空列中开发带有垂直边框的表格内容。首先，我尝试<hr/>在第一列和第三列之间使用，但它不起作用。

这是这样编写的当前代码。

<table>
  <tr>
    <th>Machine Weight: </th>
    <td>50kg</td>
  </tr>
  <tr>
    <th>Carrying Capacity: </th>
    <td>30kg</td>
  </tr>
</table>

标签： htmlcsshtml-table

解决方案

我没有比这更好的主意，也许有人会有更好的主意？

table  {
  border-collapse : collapse;
  margin          : 2em 1em;
  font-family  : Arial, Helvetica, sans-serif;
  font-size    : 16px;
  }
td,th  {
  padding : .3em 0;
  }
th { text-align: left; width: 12em; }
td { text-align: right; width: 9em; }
tr { position  : relative;  }
tr::after {
  position    : absolute;
  display     : block;
  top         : 0;
  left        : 0;
  right       : 0;
  overflow    : hidden;
  content     : '————————————————————————————————————————————————————————';
  color       : lightgrey;
  line-height : 1.7em;
  z-index     : -1;
  }
caption {
  color          : crimson;
  font-weight    : bold;
  font-size      : 2em;
  text-align     : left;
  padding-bottom : .4em;
  }
  
<table>
  <caption>Specifications</caption>
  <tbody>
    <tr>
      <th>Machine Weight: </th>
      <td>50kg</td>
    </tr>
    <tr>
      <th>Carrying Capacity: </th>
      <td>30kg</td>
    </tr>
  </tbody>
</table>

推荐阅读