Using Bootstrap grid system in table

Question

I have a question regarding to the title.

I have looked through other question and tried their bootply to make sure that these are possible (using column grid to set the size of the column). However, my case might be more complicated than that and that's why the grid system doesn't work as I think it should be. Can you give me a hand on telling me what I should do?

Code:

<div class="container-fluid">
    <div id="wrapper">
                <table class="table table-striped" id="table">
                    <thead>
                        <th class="col-xs-1">ID</th>
                        <th class="col-xs-2">Name</th>
                        <th class="col-xs-2">Phone</th>
                        <th class="col-xs-2">Email</th>
                        <th class="col-xs-2">University</th>
                        <th class="col-xs-2">Course</th>
                        <th class="col-xs-1">Visa Catergory</th>
                        <th class="col-xs-10">Age</th>
                    </thead>
                    <tbody id="data">

                    </tbody>
                </table>
            </div>
        </div>

CSS for wrapper:

#wrapper {
    width: 600px;
    overflow-x: scroll;
}

The problem was quite simple:

• I have col-xs-10 in the column Age, but the size of it doesn't care about what number I put in there and (I think) just try to wrap up the content
• I have overflow-x
• The column total add up is more than 12

Answer 1

Width of one BS-grid cell is always 8.33% of total width of parent. 22 cells will occupy 183%. By default all cells after 100% of parent width wrap into next line. As soon as you use table, all of its <td> in one row will be aligned horizontally despite of their width. So browser draws this collision as it can, thus last table cell wil be shrinked. I think that bootstrap isn't a table format tool. It's rather a table's look beautifier. So (I think) it's better to use set of <div>-s for table structure rendering.

It seems BS has no classes to format table as you wish. Anyway for defining table cells dimensions you can use colspan. If total of grid cells in your chunk of code is 22, then you need to define row containing 22 cells as a structure base. Look at snippet (border added for better visualization)

#wrapper {
    width: 600px;
    overflow-x: scroll;
    margin: 0 auto;
}

table td, th, thead {
   border: 1px solid orange;
}
.formatter > td {
    width: 4.5%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div id="wrapper">
        <div style="width: 183%;">
                <table class="table table-striped" id="table">
                    

                    <thead>
                        <tr>
                        <th>ID</th>
                        <th colspan='2'>Name</th>
                        <th colspan='2'>Phone</th>
                        <th colspan='2'>Email</th>
                        <th colspan='2'>University</th>
                        <th colspan='2'>Course</th>
                        <th>Visa Catergory</th>
                        <th colspan='10'>Age</th>
                        </tr>
                    </thead>
 <tr class="formatter">
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tbody id="data">
 </tbody>
                </table>
            </div>
        </div>

And here is solution using div-s styled with bootstrap classes:

#wrapper {
    width: 600px;
    overflow-x: scroll;
    margin: 0 auto;
}
div[class^="col-xs-"] {
    border: 1px solid orange;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper">
    <div style="width: 171%;">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-7">
                    <div class="row">
                        <div class="col-xs-1">ID</div>
                        <div class="col-xs-2">Name</div>
                        <div class="col-xs-2">Phone</div>
                        <div class="col-xs-2">Email</div>
                        <div class="col-xs-2">University</div>
                        <div class="col-xs-2">Course</div>
                        <div class="col-xs-1">Visa Catergory</div>
                    </div>
                </div>
                <div class="col-xs-5">
                    <div class="row">
                        <div class="col-xs-12">Age</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And here is one more variant of compact render, based on color diference:

#wrapper {
    width: 600px;
    margin: 0 auto;
}
div[class^="col-xs-"] {
    border: 1px solid orange;
    box-sizing: border-box;
    background: #99b;
}
div.subrow {
    background: #cce;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div id="wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-1">ID</div>
            <div class="col-xs-2">Name</div>
            <div class="col-xs-2">Phone</div>
            <div class="col-xs-2">Email</div>
            <div class="col-xs-2">University</div>
            <div class="col-xs-2">Course</div>
            <div class="col-xs-1">Visa</div>
            <div class="col-xs-12 subrow">Age</div>
        </div>
    </div>
</div>