Responsive Table

Hi I am using a Bootstrap Table and I am trying to make it responsive.
It says to Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

I added this wrap and it does make scroll responsive. PAGE

<div class="table-responsive">
                                  <table class="table">
                                      <caption>Protect-A-Pak Specs</caption>
                                      <thead class="thead-mod">
                                          <tr>
                                            <th>Category</th> 
                                            <th>Measurements</th>    
                                          </tr>
                                      </thead>
                                      <tbody>
                                          <tr>
                                             <th scope="row">Height</th>
                                             <td>1in/2.5cm</td>
                                          </tr>
                                           <tr>
                                             <th scope="row">Diameter</th>
                                             <td>1 1/4 in./3.2cm</td>
                                          </tr>
                                          <tr>
                                             <th scope="row">Weight</th>
                                             <td>1 oz./28.35 grams</td>
                                          </tr>
                                           <tr>
                                             <th scope="row">Temperature</th>
                                             <td>-100° F to 155° F/-73°C to 68°C</td>
                                          </tr>
                                           <tr>
                                             <th scope="row">Accuracy</th>
                                             <td>± 15%</td>
                                          </tr>
                                          <tr>
                                             <th scope="row">Mounting</th>
                                             <td>Self Adhesive or Mounting Flange</td>
                                          </tr>
                                          <tr>
                                             <th scope="row">"g" Range</th>
                                             <td>10g thru 100g in 10g increments, also 5g, 15g, 25g, 150g, 200g, 250, 300g, 500g</td>
                                          </tr>
                                      </tbody>
                                </table>
                            </div>
1 Like

Add the table-responsive to the table tag ?

Btw make sure your layout is responsive to because it looks ugly when you have a small screen.
The table is smaller then the body.

didnt work.

I am doing responsive queries later…

The rest of your page isn’t responsive. Thus the table is set to be 100% width and since it’s not responsive, it’s going to overflow wide and that table doesn’t even NEED scrollbars so they won’t be activated.

The bootstrap code is there and doing what it’s supposed to.

oh Ok so until I get to that point it will respond along with my other queries I put in?

I’m not sure I follow. Media queries have no ties to other media queries. They all act independent of each other.

Im saying since the rest of the page is not responsive other responsive queries wont go into full effect.

I mean…sorta. The visual effects of the bootstrap table media queries just so happens to be that you don’t SEE it happening. It still “works” irregardless of how responsive the rest of the page is. It’s just a matter of what you see.

1 Like

I am getting this weird gap in my table, I am assuming it is a border property
but I cant seem to find it in the code. PAGE

A couple of choices:

table {
    border-collapse:collapse;
}

or

table {
    border-spacing:0;
}

pick one

1 Like

Oh wow so it was the border of the whole table…, this is probably default right?

Yeppers :slight_smile: .

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.