Как предотвратить сжатие таблицы в окне просмотра

Question

У меня есть следующий код:

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>

Когда я растягиваю браузер так, чтобы область просмотра составляла менее 900 пикселей, строки таблицы сжимались, чтобы вписаться в область просмотра, несмотря на то, что я установил ширину явно. Как я могу предотвратить это поведение?

Answer 1

Напишите это table-layout:fixed;

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

Answer 2

Мне удалось найти ответ самому:

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

Answer 3

e: измененный ответ.

Привет,

Проверьте это, он будет динамически (ish) устанавливать ширину таблицы

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

Вы должны вручную ввести ширину вашего тд, потому что я не могу понять, как вы можете получить стиль CSS из таблицы стилей.

Что-то вроде this может помочь вам, если вы хотите, чтобы все было динамично, но, похоже, это решение работает хорошо.Я разбил его на довольно много, но вы можете сделать все это в одной строке, просто с помощью переменной tdWidth.

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

Answer 4

вставить изображение в каждый столбец, чтобы увеличить размер ячейки;

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