Question

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

我正在使用Zurb Foundation进行布局。
我在最新的Chrome（版本32.0.1700.102）和 Firefox（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属性。

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

1 个答案: