Question

我正在尝试创建一种具有标题行的表，然后详细显示它下面的行，然后是另一个标题行，依此类推。它看起来像这样：

enter image description here

但我也需要在每个细胞之间设置边界。

这是一个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执行其他操作

Answer 1

<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>

这是有效的，现在你可以根据自己的心灵内容进行设计！

Answer 2

在H4上设置margin-bottom:0 ..

.row .h4 {
    border-top: 1px solid #DADADA !important;
    padding-top: 10px;
    margin-bottom:0;
}

http://jsfiddle.net/MyeXa/4/

如果要删除所有间隙，还需要删除上边距，并在cols中添加填充..

http://jsfiddle.net/MyeXa/5/

创建多行标题

2 个答案: