Question

我正在尝试使用div创建一个表。具有两列的表的结构类似于

<div>
<div class = "columnborder"><span>Some text for column 1</span></div>
<div><span>Some text for column 2</span></div>
</div>

我希望列之间有垂直边框。所以给了一个班级的专栏作家＆＃39;到代表表格单元格的div

.columnborder{
  border-right  :1px black;
}

这非常有效，我得到了一个表的预期行为，其中两列之间用垂直边框分隔。但是当第一列文本为空时，不会创建范围。结构将类似于

<div>
 <div class = "columnborder"></div>
 <div><span>Some text for column 2</span></div>
</div>

在这种情况下，边框不会显示。我不希望这发生，因为我已经将样式应用于div而不是跨度。我该如何避免这种情况？可能导致这种情况的原因是什么？

Answer 1

更新CSS：

正如SW4所说，你的陈述是无效的。它应该是：

.columnborder{border-right:1px solid;}

并关闭div标签：

<div class="table">
    <div class="columnborder"></div> /* close div */
    <div><span>Some text for column 2</span></div> /* close div */
</div>

Answer 2

您的div未关闭，请检查您的结构并关闭div

demo

<div>
    <div class = "columnborder"><span>Some text for column 1</span></div>
    <div><span>Some text for column 2</span></div>
</div>

CSS

.columnborder{
  border-right  :1px solid black;
  width:160px;
 }

Answer 3

我建议使用flexbox。边框始终位于表格高度，不依赖于单元格高度。这是因为flexbox项目默认为align-items: stretch（拉伸以填充容器）。

＆＃13;

.table {
  display: -webkit-flex;
  display: flex;
}
.table > div {
  -webkit-flex: 1;
  flex: 1;
  padding: 1em;
}
.table > div:first-of-type {
  border-right: thin solid red;
}

＆＃13;

<div class="table">
  <div>
    <span>Some text for column 1</span>
  </div>
  <div>
    <span>Some text for column 2</span>
  </div>
</div>

＆＃13;

Answer 4

也许你应该宣布

.columnborder { display:table-cell; border-right:1px solid black; }

现在空div的高度为0，因此不显示边框。您也可以使用min-height: 1.5em;属性为空div设置最小高度。

Answer 5

问题可以归结为以下情况：

<style>
div {
  width: 5em;
}
.columnborder{
  border-right: solid 5px red;
}
</style>
<div class = "columnborder">something</div>
<div class = "columnborder"></div>

因此第二个div没有右边框。

为了清晰起见，我设置了固定宽度并使用了粗红色边框。这些修改对问题不是必不可少的。但代码border-right :1px black;不能正常工作，因为它将边框样式设置为none，即初始值。也许你在CSS代码的某些部分中将其设置为另一个未包含的值。

如果您使用浏览器的开发者工具检查情况，您会注意到第二个div的高度为0.因此，即使它具有右边框设置，该边框的高度为零也是。高度为零，因为元素没有内容。

有很多方法可以解决这个问题。如果您使用CSS表格式并且div被布置为表格单元格，则根据同一行的最高单元格，它将获得非零高度 - 除非该行的所有其他单元格缺少内容，太。您还可以显式设置高度，或者可以插入虚拟内容，如不间断空格，这会导致生成空行框。例子：

<style>
div {
  width: 5em;
}
.columnborder{
  border-right: solid 5px red;
}
</style>
<div class = "columnborder">something</div>
<div class = "columnborder" style="height: 1em"></div>
<div class = "columnborder">&nbsp;</div>

列边框不可见

5 个答案: