How to fix the size of a table so that on resizing the browser page the cells don't squeeze?

Question

I have the following HTML using angularjs & twitter bootstrap for my table.

<div class="container-fluid" style="overflow:auto">
    <table class="table table-striped" style="table-layout:fixed">
        <tr ng-repeat='(key,val) in arr' class="row">
            <td class="span1" style="width:150px;">
                    <h4>{{key}}</h4> 
            </td>
            <td class="span1" style="width:150px;" ng-repeat='(nestedKey,nestedVal) in val'>    <a href='{{nestedVal}}' target="_blank">{{nestedKey}}
                    <br>
                    <img src='{{nestedVal}}' style="width: 150px; height: 75px;" class="img-rounded"/>
                    </a>
            </td>
        </tr>
    </table>
</div>

However the overflow:scroll creates a dummy scroll bar which never activates. Whenever I resize the browser, my images become really small and squeezed tight as well as overlapping on top of each other.

What is going wrong?

Answer 1

You can use a min-width css attribute on the table, causing the table to remain a certain minimum width when the screen is smaller:

table{
   min-width:800px;
}

Alternatively, you could also adapt the layout / width of your table with CSS media queries for mobile views:

@media all and (max-width: 800px){
  /* your table specific query here */
}

The quickest for you would be solution 1