html - 使用 Bootstrap 网格创建表格并添加边框

Question

我使用 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 表格才有可能？

Answer 1

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