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;
  border-right: 1px solid red;
  padding-right: 30%
}
.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>

Answer 2

试试这个..

   #info_table_wrap {
     border: 1px solid black;
   }
   .info_table {
     border-right: 1px solid red;
     border-left: 1px solid red;
     border-top: 1px solid red;
     width: : 100%;
   }
   .tabellenzelle_l {
     display: inline;
     float: left;
   }
   .tabellenzelle_r {
     display: inline;
     float: right;
     border-left: 2px solid red;
     width: 50%;
     text-align: right;
   }

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<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>

try this codepen

Answer 3

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

Answer 4

以下是纯表示例，将 colspan 与表格标题结合起来，以满足您的需求

<div class="table-responsive">
<table class="table table-bordered">
        <thead>
            <tr>
              <th colspan="4">Summer Period</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John</td>
                <td>Carter</td>
                <td>johncarter@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Peter</td>
                <td>Parker</td>
                <td>peterparker@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
                <td>Rambo</td>
                <td>johnrambo@mail.com</td>
            </tr>
        </tbody>
    </table>
    </div>

https://jsfiddle.net/DTcHh/18212/

使用引导网格创建表并添加边框

4 个答案: