How to prevent a table from shrinking into a 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 viewport is less than 900px, table's rows are shrinked to fit into the viewport despite the fact that I set width explicitly. How can I prevent this behavior?

I want the table width be equal to 900px without specifying explicitly (so I can add new column without updating the style sheet) — Konstantin Solomatov, Mar 16 '12 at 10:02

score 4 · Accepted Answer · answered Mar 16 '12 at 14:01

4

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

answered Mar 16 '12 at 14:01

Konstantin Solomatov

10,252
8
58
88

This, however works in chrome only. Decided to use a different approach to the same problem. – Konstantin Solomatov Mar 19 '12 at 12:25

score 2 · Answer 2 · edited May 23 '17 at 11:33

2

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

edited May 23 '17 at 11:33

Community

1
1

answered Mar 16 '12 at 09:59

Yes it solves it (actually I did it with JS) but if I add a new column, I need to change the width again which isn't the best solution. – Konstantin Solomatov Mar 16 '12 at 10:01
@KonstantinSolomatov, have a look at my new response. – Mar 16 '12 at 10:45
It's the solution that I use now (I use GWT instead of Jquery) but isn't very good IMO. BTW you solution has a mistake: it doesn't take a border into account – Konstantin Solomatov Mar 16 '12 at 10:48
Why would it need to? You said you set the width so wanted the table to follow that. The width (in this instance) is `3 * 300`, hence 900. You didn't ask for border to be taken into account. And sure, there probably is some spectacular way to go about it, but if what works works, then why change it? – Mar 16 '12 at 10:50
IMO, it's kind of hack. It's ok to use a hack if there's no way to workaround the problem. – Konstantin Solomatov Mar 16 '12 at 10:57
Short of writing a dynamic CSS file with PHP or something, this works just fine. – Mar 16 '12 at 11:00

score 2 · Answer 3 · answered Mar 16 '12 at 10:01

2

Write this table-layout:fixed;

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

answered Mar 16 '12 at 10:01

sandeep

91,313
23
137
155

score -1 · Answer 4 · edited Sep 03 '14 at 21:36

-1

insert an image into each column to force the cell size;

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

edited Sep 03 '14 at 21:36

Tom Carrick

6,349
13
54
78

answered Sep 03 '14 at 21:14

Norm

1
1

How to prevent a table from shrinking into a viewport

4 Answers4

Linked