我正在尝试创建一种具有标题行的表,然后详细显示它下面的行,然后是另一个标题行,依此类推。它看起来像这样:
但我也需要在每个细胞之间设置边界。
这是一个jsFiddle:http://jsfiddle.net/MyeXa/2/
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Pens</h1>
<div class="i-info">
<div class="row h4 i-header">
<div class="col-md-6">
Created On
</div>
<div class="col-md-6">
Last Updated On
</div>
</div>
<div class="row">
<div class="col-md-6">
30/01/2013
</div>
<div class="col-md-6">
04/02/2013
</div>
</div>
</div>
<div class="i-info">
<div class="row h4 i-header">
<div class="col-md-4">
Item Number
</div>
<div class="col-md-4">
Item Name
</div>
<div class="col-md-4">
Item Description
</div>
</div>
<div class="row">
<div class="col-md-4">
5555
</div>
<div class="col-md-4">
Pen
</div>
<div class="col-md-4">
Nice pen
</div>
</div>
</div>
<div class="i-info">
<div class="row h4 i-header">
<div class="col-md-6">
Status
</div>
<div class="col-md-6">
Repair Status
</div>
</div>
<div class="row">
<div class="col-md-6">
Good
</div>
<div class="col-md-6">
Fixed
</div>
</div>
</div>
<div class="i-info">
<div class="row h4 i-header">
<div class="col-md-12">
Assigned Shop
</div>
</div>
<div class="row">
<div class="col-md-12">
Shop 1
</div>
</div>
</div>
<div class="i-info">
<div class="row h4 i-header">
<div class="col-md-6">
LT
</div>
<div class="col-md-6">
LT Pending
</div>
</div>
<div class="row">
<div class="col-md-6">
N/A
</div>
<div class="col-md-6">
416 Days and 33 Minutes
</div>
</div>
</div>
</div>
</div>
现在问题来了,当我尝试添加边框来分隔每个单元格时,线条在中间切割(参见小提琴输出)。我不确定是否应该更改布局,或者我是否需要使用CSS执行其他操作
答案 0 :(得分:0)
<table>
<tr><th>column 1</th><th>column two</th><th>and column 3</th></tr>
<tr><td>info</td><td>more info</td><td>yet even more info</td></tr>
<tr><td>info</td><td>more info</td><td>yet even more info</td></tr>
<tr><th>new column 1</th><th>column two</th><th>and column 3</th></tr>
<tr><td>info</td><td>more info</td><td>yet even more info</td></tr>
<tr><td>info</td><td>more info</td><td>yet even more info</td></tr>
<tr><td>info</td><td>more info</td><td>yet even more info</td></tr>
</table>
这是有效的,现在你可以根据自己的心灵内容进行设计!
答案 1 :(得分:0)
在H4上设置margin-bottom:0
..
.row .h4 {
border-top: 1px solid #DADADA !important;
padding-top: 10px;
margin-bottom:0;
}
如果要删除所有间隙,还需要删除上边距,并在cols中添加填充..