How to prevent table shortening in the viewport

Question

I have the following code:

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

 <table> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> </tr> </table> 

When I stretch the browser so that the viewport is less than 900 pixels, the rows of the table are compressed to fit the viewport, despite the fact that I explicitly set the width. How can I prevent this behavior?

Answer 1

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; } 

Answer 2

e: Modified answer.

Hello,

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

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 need to manually enter the width of your td, because I cannot figure out how you can get the CSS style from the stylesheet.

Something like this might help you if you want everything to be dynamic, but this solution seems to work well. I broke it pretty much, but you could do it all on one line with the variable tdWidth.

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

Answer 3

Write this table-layout:fixed;

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

Answer 4

Insert an image in each column to increase the size of the cell;

<img src="blank.gif" width="300" height="1" border="0" alt="">