How could we make bootstrap rows/columns look like a table?

Question

My #1 try fails because of padding in col's.

My #2 try also because I must be doing something stupid.

Here's desired result:

Could someone help me? Please avoid rewriting bootstrap rules if possible.

Why don't you simply use [bootstrap tables](http://getbootstrap.com/css/#tables) ? Everything is already done for you — tektiv, Jun 29 '16 at 12:44
Tables are not evil when used for the right purpose. This seems like the right purpose to me. — isherwood, Jul 01 '16 at 16:48

Saurabh Sonawane · Accepted Answer · 2016-07-15T15:30:54.073

Basic principle of Table -> row / column is that, in a particular row, columns should be of equal height whatever is the content.

You can make table -> row/columns structure using bootstrap grid but there will be a problem of equal heights column.

So, for this purpose i.e. for equal columns, you can use flexbox property. (it doesn't work in ie9 and less so be sure about its use.)

Check this fiddle here

Just add following simple CSS to a parent container (for complete demo checkout above fiddle),

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Here is the reference

score 6 · Answer 2 · edited Nov 16 '17 at 19:49

You can use table-responsive :

<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="table-responsive">

    <table class="table table-bordered table-striped">
        <thead>
            <tr> <td></td> <th>Chrome</th> <th>Firefox</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Android</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-muted" rowspan="3" style="vertical-align:middle">N/A</td>
                <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
                <td class="text-muted">N/A</td>
            </tr>
            <tr>
                <th scope="row">iOS</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-muted">N/A</td>
                <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
            </tr>
            <tr>
                <th scope="row">Mac OS X</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
            </tr>
            <tr>
                <th scope="row">Windows</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
            </tr>
        </tbody>
    </table>

</div>
</body>
</html>

The best answer, using the official way from Bootstrap – dippas Jul 09 '16 at 09:53 — dippas, Jul 09 '16 at 09:53

score 4 · Answer 3 · edited May 23 '17 at 12:25

4

Have you tried using a Bootstrap table? If not, I would recommend you do that and set the <td>s with the width you want. For example:

<tr class="something">
<td class="col-md-2">A</td>
<td class="col-md-3">B</td>
<td class="col-md-6">C</td>
<td class="col-md-1">D</td>

Source

edited May 23 '17 at 12:25

Community

1
1

answered Jul 01 '16 at 16:42

Thomas Wolfe

638
6
11

Yes, I also recommend to use Bootstrap table. After all you will need to change the behaviour of your markup to work accordingly like a table. – Anil Tiwari Jul 05 '16 at 09:16

score 3 · Answer 4 · answered Jul 06 '16 at 15:32

Like everybody said before, you can use the table tags. But if you still want to use divs, you can use Bootstrap's grid class to assure your table still appear well on every screen size. I edited your code like this:

<style>
    .table {
        width: auto;
        margin: 0 auto;
        border: 1px solid red;
    }
    .table .row {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .table .row div {
        border: 1px solid red;
    }
</style>

<div class="table">

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <img src="image1.jpg" alt="image1">
            Some content here. Hello stackoverflow!
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <img src="image2.jpg" alt="image2">
            Some content here. Hello stackoverflow!
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <img src="image3.jpg" alt="image3">
            Some content here. Hello stackoverflow!
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8">
            Some content here. Hello world!
        </div>
    </div>

</div>

As you can see, I used display: flex; and flex-wrap: wrap; on the .row to make the cells the same height.

Good luck!

score 2 · Answer 5 · answered Jul 04 '16 at 18:30

I made some changes on your code. but I don't know if it's excately what you expect:

HTML:

<div class="container">
  <div class="row">
    <div class="image-column col-md-4">
      <img src="" alt="image" />
    </div>
    <div class="image-column col-md-4">
      <img src="" alt="image" />
    </div>
    <div class="image-column col-md-4">
      <img src="" alt="image" />
    </div>
  </div>

  <div class="row">
    <div class="content-column col-md-4">
      Some content here. Hello world!
    </div>
    <div class="content-column col-md-4">
      Some content here. Hello world!
    </div>
    <div class="content-column col-md-4">
      Some content here. Hello world!
    </div>
  </div>
</div>

CSS:

/* CSS used here will be applied after bootstrap.css */

.container {
    text-align: center;
}
.container .row {
    display: flex;
}
.container .row:nth-child(even) {
    background: gainsboro;
}
.container .content-column, .container .image-column {
   border: 1px solid grey;
}
.container .row:not(:first-child) .content-column, .container .row:not(:first-child) .image-column {
    border-top: 0px;
}
.container .content-column:not(:first-child), .container .image-column:not(:first-child) {
   border-left: 0px;
}
.image-column {
    padding: 5px;
}
.content-column {
   border: 1px solid grey;
   border-top: 0px;
  font-size: 1.3em;
}
.content-column:not(:first-child) {
   border-left: 0px;
}

Result:

Check this in action: http://www.bootply.com/1MaNWk0ybV

score 2 · Answer 6 · answered Jul 05 '16 at 07:56

2

you can use row display:table colum display:table-cell

answered Jul 05 '16 at 07:56

Rakesh Kumar

21
1

Anil Panwar · Answer 7 · 2018-01-31T11:09:14.967

Please see the working DEMO..This is exactly what you need.... Hope it help you a bit.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" >
  <div class="row" style="border: 1px solid grey;">
    <div class="col-md-4  col-sm-4  col-xs-4 text-center" style="border-right:1px solid grey">
     <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/>
    </div>
    <div class="col-md-4 col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
     <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/>
    </div>
    <div class="col-md-4 col-sm-4  col-xs-4  text-center"  style="border-right:1px solid grey">
      <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/>
    </div>
  </div>
 <div class="row" style="border: 1px solid grey;background-color:#f3f3f3">
    <div class="col-md-4 col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
    <strong>Yes</strong>
    </div>
    <div class="col-md-4  col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
       <strong>Yes</strong>
    </div>
    <div class="col-md-4  col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
         <strong>Yes</strong>
    </div>
  </div>
</div>

This code makes a thick horizontal border between the two rows. — John, Sep 04 '18 at 01:50

Shubham Baranwal · Answer 8 · 2016-07-16T17:47:57.450

Here is the code for your problem may be this can help you.

Check this fiddle link JSFiddle

HTML CODE

<div style="width: 900px; margin: 0 auto;display:table-cell; border: 1px solid red;">
  <div class="row">
    <div class="col-md-4 tableColumnDiv">
        <img src="" alt="image"> Some content here. Hello stackoverflow!
    </div>
    <div class="col-md-8 tableColumnDiv">
        Some content here. Hello world!
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 tableColumnDiv">
        <img src="" alt="image"> Some content here. Hello stackoverflow!
    </div>
    <div class="col-md-8 tableColumnDiv">
        Some content here. Hello world!
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 tableColumnDiv">
        <img src="" alt="image"> Some content here. Hello stackoverflow!
    </div>
    <div class="col-md-8 tableColumnDiv">
        Some content here. Hello world!
    </div>
  </div>
</div>

CSS CODE

.image-column {
   border: 1px solid black;
}
.tableColumnDiv{
  display:table-cell;
  border: 1px solid black;
}

score 2 · Answer 9 · answered Jul 09 '16 at 12:43

Try this and read the comments in CSS area: http://www.bootply.com/byopZWzR2K

This code will solve the vertical alignment of any cell.

Here is the same code also:

CSS

/* This play-area class is just for testing and aligned the width of this table */
.play-area{width:400px;margin:19px auto}
.play-area img{height:32px;}

.make-this-table{border:1px solid #d7d7d7;overflow:hidden;} /* this to give our table outer border */
.make-this-table .row{border-top:1px solid #d7d7d7;background:#e7e7e7} /* This simple to add separator line between each row also to give each row background color */
.make-this-table .row:nth-child(1){border:none;background:#c5c5c5} /* This to ignore the separator for the first row since it will be the head of this table. You can remove this line to have this table without head */


/* This code to make rows in alternative background colors */
.make-this-table .row:nth-child(even) {background:#fff}


/* This to make the text vertical align in middle if the next column in the same row has more than one line while the first column just one line like the second row in this table .. You can remove this line if you like to make the alignment at the top of the cell. */
.make-this-table .row{align-items: center;display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}

-

HTML

<div class="play-area">
<div class="make-this-table">

  <div class="row">
    <div class="col-md-4 col-xs-4">
        <img src="http://www.chromium.org/_/rsrc/1438811752264/chromium-projects/logo_chrome_color_1x_web_32dp.png" alt="" style="">
    </div>
    <div class="col-md-8 col-xs-8">
        <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" alt="" style="width:32px;">
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Chrome Browser.
    </div>
    <div class="col-md-8 col-xs-8">
        Firefox Browser.
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Updated.
    </div>
    <div class="col-md-8 col-xs-8">
      Not Updated<br>New line.<br>Now firefox is updated.
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Try new line.
    </div>
    <div class="col-md-8 col-xs-8">
      Adding image to break line: <img src="http://www.w3schools.com/images/compatible_edge.gif" alt="">
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Keep trying ..
    </div>
    <div class="col-md-8 col-xs-8">
        Also keep trying Ya labba ..
    </div>
  </div>


</div>
</div>

score 1 · Answer 10 · answered Jul 04 '16 at 20:49

Aigzy and Waldir are both providing good solutions, but they are making the same mistake. The solutions they propose are not responsive. On mobile the 'table' will no longer be readable. To avoid this you need to nest the columns one level more, like this:

<div class="row">
  <div class="col-md-4">
    <div class="col-md-12"> (image) </div>
    <div class="col-md-12"> (text) </div>
  </div>
  <div class="col-md-4">
    <div class="col-md-12"> (image) </div>
    <div class="col-md-12"> (text) </div>
  </div>
  <div class="col-md-4">
    <div class="col-md-12"> (image) </div>
    <div class="col-md-12"> (text) </div>
  </div>
</div>

http://www.bootply.com/jYSePqMDGi

score 1 · Answer 11 · answered Jul 09 '16 at 10:05

Here is the working code: Bootply link

2 step process:

Add an extra class(.row-table) for .row and assign the following css properties.

.row-table{ display:flex;  
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;}

Add an extra class .table-cell to our col-x-x and assign the following css properties.

.table-cell{ border-color: black; border-style:solid; border-width:1px 0 0 1px;}
.row-table .table-cell:last-child{ border-right-width:1px;}
.row-table:last-child .table-cell{ border-bottom-width:1px;}

Note: column width depends upon the column grid classes you use.

score 1 · Answer 12 · answered Jul 10 '16 at 12:22

1

How about following aproach:

bootply example

It uses CSS to set display, so the columns are the same height. Found the CSS at following link:

equal height columns example

answered Jul 10 '16 at 12:22

Ruben Pirotte

386
2
11

score 1 · Answer 13 · answered Jul 11 '16 at 06:17

In your second example i changed the image-column and content-column, its working.. Try this it may help you...

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
    /* CSS used here will be applied after bootstrap.css */
    
    .row {
        display: flex;
    }
    
    .image-column {
        border: 1px solid black;
    }
    
    .content-column {
        border: 1px solid black;
    }
</style>
<div style="width: 90%; margin: 0 auto;">

    <div class="row">
        <div class="col-md-4 image-column">
            <img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here.
        </div>

        <div class="col-md-8 content-column">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 image-column">
            <img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here.
        </div>
        <div class="col-md-8 content-column">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 image-column">
            <img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here.
            </div>
            <div class="col-md-8 content-column">
                Some content here. Hello world!
            </div>
        </div>

    </div>

How could we make bootstrap rows/columns look like a table?

13 Answers13