我使用 bootstrap 网格布局创建了一个表格,不幸的是我无法正确添加边框。
#info_table_wrap {
border: 1px solid black;
}
.info_table {
border-right:1px solid red;
border-left:1px solid red;
border-top:1px solid red;
}
.tabellenzelle_l {
display: inline;
float: left;
}
.tabellenzelle_r {
display: inline;
float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="info_table_wrap">
<div class="row info_table">
<div class="col-xs-3 info_table">
HEAD1
</div>
<div class="col-xs-3 info_table">
HEAD2
</div>
<div class="col-xs-3 info_table">
HEAD2
</div>
<div class="col-xs-3 info_table">
HEAD4
</div>
</div>
<div class="row info_table">
<div class="col-xs-3 info_table">
<div class="tabellenzelle_l">FOO</div>
<div class="tabellenzelle_r">123</div>
</div>
<div class="col-xs-3 info_table">
<div class="tabellenzelle_l">TEST1</div>
<div class="tabellenzelle_r">ABC</div>
</div>
<div class="col-xs-3 info_table">
<div class="tabellenzelle_l">FOO</div>
<div class="tabellenzelle_r">123</div>
</div>
<div class="col-xs-3 info_table">
<div class="tabellenzelle_l">TEST1</div>
<div class="tabellenzelle_r">ABC</div>
</div>
</div>
<div class="row info_table">
<div class="col-xs-3 info_table">
<div class="tabellenzelle_l">BAR</div>
<div class="tabellenzelle_r">456</div>
</div>
<div class="col-xs-3 info_table">
<div class="tabellenzelle_l">TEST2</div>
<div class="tabellenzelle_r">DEF</div>
</div>
<div class="col-xs-3 info_table">
<div class="tabellenzelle_l">FOO</div>
<div class="tabellenzelle_r">123</div>
</div>
<div class="col-xs-3 info_table">
<div class="tabellenzelle_l">TEST1</div>
<div class="tabellenzelle_r">ABC</div>
</div>
</div>
我尝试添加边框,如下面的屏幕截图所示:
这是可能的还是只有普通的 html 表格才有可能?
最佳答案
#info_table_wrap {
border: 1px solid black;
}
.info_table {
border-right:1px solid red;
border-left:1px solid red;
border-top:1px solid red;
}
.tabellenzelle_l {
display: inline;
float: left;
}
.tabellenzelle_r {
display: inline;
float: right;
}
.border-right{
border-right:1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="info_table_wrap">
<div class="row info_table">
<div class="col-xs-3 info_table">
HEAD1
</div>
<div class="col-xs-3 info_table">
HEAD2
</div>
<div class="col-xs-3 info_table">
HEAD2
</div>
<div class="col-xs-3 info_table">
HEAD4
</div>
</div>
<div class="row info_table">
<div class="col-xs-3 info_table">
<div class="col-xs-6 text-center tabellenzelle_l border-right">FOO</div>
<div class="col-xs-6 text-center tabellenzelle_r">123</div>
</div>
<div class="col-xs-3 info_table">
<div class="col-xs-6 text-center tabellenzelle_l border-right">TEST1</div>
<div class="col-xs-6 text-center tabellenzelle_r">ABC</div>
</div>
<div class="col-xs-3 info_table">
<div class="col-xs-6 text-center tabellenzelle_l border-right">FOO</div>
<div class="col-xs-6 text-center tabellenzelle_r">123</div>
</div>
<div class="col-xs-3 info_table">
<div class="col-xs-6 text-center tabellenzelle_l border-right">TEST1</div>
<div class="col-xs-6 text-center tabellenzelle_r">ABC</div>
</div>
</div>
<div class="row info_table">
<div class="col-xs-3 info_table">
<div class="col-xs-6 text-center tabellenzelle_l border-right">BAR</div>
<div class="col-xs-6 text-center tabellenzelle_r">456</div>
</div>
<div class="col-xs-3 info_table">
<div class="col-xs-6 text-center tabellenzelle_l border-right">TEST2</div>
<div class="col-xs-6 text-center tabellenzelle_r">DEF</div>
</div>
<div class="col-xs-3 info_table">
<div class="col-xs-6 text-center tabellenzelle_l border-right">FOO</div>
<div class="col-xs-6 text-center tabellenzelle_r">123</div>
</div>
<div class="col-xs-3 info_table">
<div class="col-xs-6 text-center tabellenzelle_l border-right">TEST1</div>
<div class="col-xs-6 text-center tabellenzelle_r">ABC</div>
</div>
</div>
检查这个,https://jsfiddle.net/v3m2tess/ 我使用 col-xs-6
。
关于html - 使用 Bootstrap 网格创建表格并添加边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35984139/