为div添加边框看起来像一个表

Question

我需要创建两个列，看起来像一个具有漂亮的1px边框的表。 边框杀死布局。有没有什么好方法可以在中间用一条线条做好边框？

.column-5 { width:50%; float:left; }
.border-light { border: 1px solid black; }

<div class="row">
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
</div>

http://jsfiddle.net/7zdLdmey/

Answer 1

添加边界＆＃34;杀死＆＃34;布局是因为计算宽度时不考虑边框宽度（默认情况下使用content-box布局）。两个容器的宽度总和为50％+ 50％+ 4px（4px 1xx边框），超过100％。这会导致第二个<div>元素换行到下一行。

使用box-sizing: border-box可以轻松解决这个问题。此属性的作用是强制宽度计算包括元素上存在的任何边框大小，以便内部宽度加上边框大小加起来声明的宽度。

＆＃13;

＆＃13;

.column-5 {
  width: 50%;
  float: left;
  
  /* Force width to take into account border size */
  box-sizing: border-box;
}

.border-light {
  border: 1px solid black;
}

＆＃13;

<div class="row">
  <div class="column-5 border-light">
    column 1
  </div>
  <div class="column-5 border-light">
    column 2
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

以下图表可帮助您了解box-sizing属性（source）的三种不同可能值：

1. content-box（默认值）未考虑填充和边框
2. padding-box仅考虑填充（不是您想要的）
3. border-box考虑了填充和边框

p / s：这些盒子大小调整属性都没有考虑边距，因为它们在技术上在框外。

Answer 2

将box-sizing: border-box;插入.column-5：

.column-5 {
    width:50%;
    float:left;
    box-sizing: border-box;
}

.border-light {
    border: 1px solid black;
}

<div class="row">
  <div class="column-5 border-light">
    column 1
  </div>
  <div class="column-5 border-light">
    column 2
  </div>
</div>

Answer 3

试试这个。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.column-5{
  width:50%;
  float:left;
}
.border-light { 
  border: 1px solid black;
  border-right:0; 
}
.border-light:last-child{
  border-right: 1px solid black;
}

<div class="row">
  <div class="column-5 border-light">
    column 1
  </div>
  <div class="column-5 border-light">
    column 2
  </div>
</div>

Answer 4

删除边框并改为使用大纲：

.column-5 { width:50%; float:left; }
.border-light { outline: 1px solid black; }

<div class="row">
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
</div>

Answer 5

我已经演示了一些方法，您可以通过下面嵌入的代码片段来探索实现预期结果。

它包含多个x2嵌套子元素的示例。

基本上，它归结为使用pseudo-class选择器。

  

CSS 伪类是添加到指定a的选择器的关键字   所选元素的特殊状态。例如，：悬停可以   当用户将鼠标悬停在按钮上时，用于更改按钮的颜色。

想了解更多信息？ https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

.column-5 { width:50%; float:left; }
.border-light { border: 1px solid black; }

/* Additional */

.column-5:not(:last-child) { /* if .row will only have x2 nested children */
  border-bottom: 0px;
}
/* OR */
.column-5:first-child { /* if .row will only have x2 nested children */
  border-bottom: 0px;
}

.many-nested.even .column:nth-child(even) { /* if .row will only more than x2 nested children */
  border-top: 0px;
}
/* OR */
.many-nested.odd .column:nth-child(odd) { /* if .row will only more than x2 nested children */
  border-bottom: 0px;
}

/* Clear floats */

br {
  clear: both;
  margin: 20px auto;
  display: block;
}

<div class="row">
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
</div>
<br>
<!-- Note: additional classes added purely as demonstration and selector specificity -->
<div class="row many-nested even">
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
</div>
<br>
<div class="row many-nested odd">
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
</div>

Answer 6

HTML

 <div class="row">
      <div class="column-5 border-light">
        column 1
      </div>
      <div class="column-5 border-light lastRow">
        column 2
      </div>
    </div>

CSS

 .column-5{width:50%; float:left;}
    .border-light { 
     border-top: 1px solid black;
     border-left: 1px solid black;
     border-bottom: 0px solid black;
     border-right: 1px solid black;
    }
    .lastRow { 
     border-bottom: 1px solid black;
    }