屏幕调整大小时如何防止 HTML 表格的中间列被挤压？

Question

我有一个三列四行的 HTML 表格，在 CSS 中我指定每个单元格的高度和宽度（以像素为单位）。当屏幕大或小时，单元格显示正确的大小，但在大小之间的某个地方，中间列的宽度被挤压并且比它应该的窄得多。如何保持宽度不变？

• 我正在使用 Zurb Foundation 进行布局。
• 我在最新的 Chrome（版本 32.0.1700.102）和 火狐 (26.0)。
• 当屏幕宽度在大约 640 之间时会出现问题 和 800 像素宽。在此之上和之下都很好。

这就是 HTML 的样子：

<div class="row">
  <div class="large-3 medium-4 small-12 columns left">
    <table>
      <tr>
        <th colspan="3">Header description</th>
      </tr>
      <tr>
        <td class='key'>1</td>
        <td class='key'>2</td>
        <td class='key'>3</td>
      </tr>
      <tr>
        <td class='key'>4</td>
        <td class='key'>5</td>
        <td class='key'>6</td>
      </tr>
      <tr>
        <td class='key'>7</td>
        <td class='key'>8</td>
        <td class='key'>9</td>
      </tr>
    </table>
  </div>

  <div class="large-3 medium-4 small-12 columns left">
    Other Content...
  </div>
</div>

这是“key”类的相关 CSS：

.key {
  margin: 3px;
  padding: 0;
  height: 53px;
  width: 53px;
  border: solid 1px #fff;
  text-align: center;
}

Answer 1

代码运行良好。您使用的是哪个浏览器？尝试设置 min-width 属性，如果您使用的是响应式设计，请确保它不会覆盖 width 属性。