代码之家 › 专栏 › 技术社区 › Bahman Parsa Manesh

如何在顶部和底部边框之间有空格的表行中添加垂直行

css html

Bahman Parsa Manesh · 技术社区 · 8 年前

正如我在标题中所说,我想在表格中添加一条垂直线,如下所示:

screenshot

我怎样才能像那样在垂直线上加上一个空白。

我的边界塌陷也是分开的。

jsFiddle

HTML格式:

<table>
  <tbody>
    <tr>
      <td class="no-vl"></td>
      <td class="vl"></td>
    </tr>
  </tbody>
</table>

CSS:

table {
  border-collapse: separate;
  border-spacing: 0 5px;
}

td {
  width: 200px;
  border: 1px solid black;
  padding: 20px;
}

.vl {
  border-left: 6px solid green;
  height: 50px;
  left: 50px;
}

.no-vl {
  border-right: none;
}

2 回复 | 直到 8 年前

samuellawrentz 8 年前

我不确定这是否是你想要的。你可以用 after 伪元素 td 达到预期效果

td{
  padding:10px;
  border-style: solid;
  border-color: grey;
  border-width: 1px 0; 
}

table{
border-collapse: collapse;
}

td:after{
  content: '';
  border-right: 2px solid grey;
  padding:5px;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

Jos van Weesel 8 年前

您可以使用 column-rule 财产

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

p {
  width: 90%;
  text-align: justify;
  column-count: 2;
  column-rule: 3px solid darkgrey;
  column-gap: 30px;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, error eligendi quibusdam placeat veniam? Doloremque quis id eveniet, nemo fugiat veritatis aspernatur consequuntur perspiciatis animi, aperiam asperiores dolorem adipisci ad labore quos aliquid
  voluptatibus vero alias natus, deserunt beatae. Repellat minus dolorem architecto provident alias perferendis nihil voluptatum odit ipsum, deleniti iusto, mollitia, atque aut, omnis enim maxime accusantium. Non, maxime. Odit culpa, sint explicabo dignissimos
  eum corporis.
</p>