Question

我正在创建一个DIV表，但包含列的最后两行不显示边框。有人知道解决方法吗？

这是我的代码：

CSS

.contentwrap {  width: 300px;   display: table; }   
.contentwrap .box-row {display: table-row;} 
.contentwrap .box { padding: 15px;  display: table-cell; border: 1px solid #e5e5e5; }   
.contentwrap .box-column { display: table-row; }
.contentwrap .column { padding: 15px; display: table-cell; width: 10%; border-color: #e5e5e5; }

HTML

<div class="contentwrap">
    <div class="box-row">
        <div class="box">row 1</div>
    </div>
    <div class="box-row">
        <div class="box">row 2</div>
    </div>
    <div class="box-row">
        <div class="box">rpw 3</div>
    </div>
    <div class="box-row">
        <div class="box">row 4</div>
    </div>
    <div class="box-row">
      <div class="box-column">
        <div class="col">column1</div>
        <div class="col">column2</div>
        <div class="col">column3</div>
        <div class="col">column4</div>
      </div>
      <div class="box-column">
        <div class="col">column1</div>
        <div class="col">column2</div>
        <div class="col">column3</div>
        <div class="col">column4</div>
      </div>
    </div>
</div>

Answer 1

根据我的理解，对CSS的以下修改应该可以解决问题。

.box-column { display: table-row; } 
.col{ padding: 15px; display: table-cell; width: 10%; border-color: #e5e5e5; border: 1px solid #e5e5e5; }

Answer 2

我不确定这是否是您想要的效果，但我只是改变了 border-color: #e5e5e5;至.contentwrap .column

中的border: 1px solid #e5e5e5;

赞this

.contentwrap .col 
{ 
    padding: 15px; 
    display: table-cell; 
    width: 10%; 
    border: 1px solid #e5e5e5 
}

另外，您可能需要在使用col的html中检查您的namings，但您的css正在使用column。我在这里为你改为col。

DIV表与行和列

2 个答案: