如何防止表格缩小到视口中 [英] How to prevent a table from shrinking into a viewport

问题描述

我有以下代码:

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时，尽管我明确设置了宽度，但表格的行会缩小以适合视口.如何防止这种行为?

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

这篇关于如何防止表格缩小到视口中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！