keep column width using responsive table bootstrap3

Question

I have a table with 7 columns (td). I'm setting a fixed width and it's working perfectly using a browser on desktop. However, When I resize my browser to simulate a mobile phone or even accessing this page through a mobile device, it won't respect column width.

I won't put the entire html, but it's basically:

<div class="table-responsive">
    <table>
         <tr>
              <td class="w-large">Column 1</td>
              <td class="w-medium">Column 2</td>
              <td class="w-medium">Column 3</td>
              <td class="w-medium">Column 4</td>
              <td class="w-medium">Column 5</td>
              <td class="w-medium">Column 6</td>
              <td class="w-medium">Column 7</td>
         </tr>
    </table>
</div>

CSS:

.w-large {
    width: 198px;
}

.w-medium {
    width: 176px;
}

Is there a way to keep column width on mobile? Does bootstrap have a special class to do this similar to table-responsive?

Do you really need a table-responsive if you have fixed columns ?? — BENARD Patrick
– BENARD Patrick, Commented Sep 18, 2014 at 15:17
Why does the table-responsive class is not on your table but on your parent div ? — BENARD Patrick
– BENARD Patrick, Commented Sep 18, 2014 at 15:19
Well, I've tried a grid system before, and my client didn't like it. So I switched to table responsive, which include a scroll. For our need, it's better. But I would like to keep column width since I have a scroll. — Thiago Custodio
– Thiago Custodio, Commented Sep 18, 2014 at 16:24
@TheLittlePig -- the .table-responsive is supposed to wrap the table, not be on the table itself. — Christina
– Christina, Commented Sep 18, 2014 at 16:48

Christina · Accepted Answer · 2014-09-18 16:47:04Z

9

.table-responsive is supposed to be as you have it, on the wrapper around the table. The widths won't be kept because the class puts a white-space: nowrap; on th, td, etc. Do this instead:

@media screen and (max-width: 767px) {
  .alt-table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #dddddd;
    -webkit-overflow-scrolling: touch;
  }
}

HTML

<div class="alt-table-responsive">

answered Sep 18, 2014 at 16:47

Christina

34.7k17 gold badges87 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

keep column width using responsive table bootstrap3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related