Bootstrap Responsive table columns sizes

Question

I'm having static(when scrolling on lower screens it stays on same place), fixed size first column(100px) in responsive table by Bootstrap. What i want is to have others columns same size each (of the rest space: 100%-100px) with min-width css(so when it comes lower responsive starts to works). And I don't know how much non static columns i will have so col-md/xs.. are not appropriately.

In photo there is thead with dates which should share remaining space, but only to min-width for example 80px. If lower then responsive should work. Anyway I want to make timetable.

Code source:

<div class="table-responsive">
<table class="table table-condensed table-bordered" ng-if="showTable">      
    <thead>
        <tr style="background-color: #455A64; color: #FFFFFF;">
            <th style="background-color:#F5F5F5;"></th>
            <th ng-repeat="..." ng-if="..." id="{{...}}">{{ ... }}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="..." ng-if="...">
            <td style="text-align:center;background-color:#607D8B; color:#FFFFFF">{{ ... }}</td>
            <td ng-repeat="..." rowspan="{{...}}" ng-if="...">{{ ... }} </td>
        </tr>
    </tbody>
</table>
<div>

And one more thing. I don't want to text in td to go over table border. So it should adjust to size of td.

score 0 · Answer 1 · edited May 23 '17 at 10:29

0

Have you check out this (great) related question and answer?

Bootstrap - how to set up fixed width for <td>?

<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>
</tr>

edited May 23 '17 at 10:29

Community

1
1

answered Feb 29 '16 at 22:31

Dave Sloan

13
3

As i told in question.. Col-md and others won't work cas i dont know how many td will be there.. It depends on schedule which i get from db – Goran T. Feb 29 '16 at 22:36

score 0 · Accepted Answer · answered Mar 01 '16 at 09:29

I figured it out by adding:

@media 
only screen and (max-width: 767px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    .table-responsive > .table > tbody > tr > td {
        white-space: inherit;
        min-width:200px;
    }
 }

Tnx anyone for help.

Bootstrap Responsive table columns sizes

2 Answers2