How to prevent a table from shrinking into a viewport

e: Changed Answer.

Hi,

Check this out, it will dynamically (ish) set the width of the table

http://jsfiddle.net/joshuamartin/KtAny/

(function() {
    var tdWidth = '300';   


    var columnCount = $("#tID").find('tr')[0].cells.length;
    var tableWidth = tdWidth * columnCount;

    $("table#tID").attr('width', tableWidth);

    // console.log(tableWidth);
})();

You have to manually enter the Width of your td's, because I can't figure out how you can get the CSS style from the stylesheet.

Something like this might help you out if you want it all to be dynamic, but this solution seems to be working well. I've broken it down really quite a lot, but you could do it all in one line, with just a tdWidth variable.

(function() {
    var tdWidth = '300';     
    $("table#tID").attr('width', $("#tID").find('tr')[0].cells.length * tdWidth);
})();
​

Write this table-layout:fixed;

table {
  border-collapse: collapse;
  table-layout:fixed;
}

I managed to find the answer myself:

 td {
   padding: 0px;
   border: 1px solid #d3d3d3;
   min-width: 300px;
   max-width: 300px;
   width: 300px;
   height: 100px;
   text-align: center;
   white-space: nowrap;
 }