CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Black
Black

Reputation: 20322

Creating a table with bootstrap grid and adding borders

I created a table by using bootstrap grid layout, unfortunattely i have problems to add borders correctly.

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

I try to add borders like you can see in the screenshot below:

enter image description here

Is this possible or is this only possible with normal html tables?

Upvotes: 1

Views: 5433

Answers (4)

Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Here is pure table example, combine your colspan in header of table for what you needs

<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>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Peter</td>
                <td>Parker</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
                <td>Rambo</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>
    </div>

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

Upvotes: 1

mmativ
mmativ

Reputation: 1414

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

check this one, https://jsfiddle.net/v3m2tess/ i use col-xs-6.

Upvotes: 1

Venu Madhav
Venu Madhav

Reputation: 433

Try this.. 

   #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

Upvotes: 1

Tushar Gupta
Tushar Gupta

Reputation: 15923

Here you go, You might need to adjust padding though, but can do this way

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

Upvotes: 1

Related Questions