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>

当我拉伸浏览器以使视口小于900px时，尽管我明确地设置了宽度，但是表的行会缩小以适合视口。我该如何防止这种行为？

Answer 1

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

您必须手动输入td的宽度，因为我无法弄清楚如何从样式表中获取CSS样式。

像this这样的东西可能会帮助你，如果你想要一切都是动态的，但这个解决方案似乎运作良好。我已经把它分解了很多，但你可以在一行中完成所有操作，只需要一个tdWidth变量。

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

Answer 2

写下这个table-layout:fixed;

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

Answer 3

我自己找到了答案：

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

Answer 4

在每列中插入图像以强制单元格大小;

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

如何防止表收缩到视口中

4 个答案: