如何创建固定布局的表格？

Question

Hai，

我正在使用html表格进行网站布局。 当我们在一个单元格中按Enter键时，单元格正在调整大小。 我用css来修复表格布局。表格布局没有改变。但是单元格正在调整大小。

.pageContent table
{
    height:100%;
    width:100%;
    table-layout:fixed;
}
.pageContent table tr td
{
  padding:5px 10px 5px 10px;
 }

如何防止表格单元格的大小调整？

Answer 1

您是否尝试添加以下CSS

td { overflow:hidden;white-space:nowrap;  }
tr { height:1em;  } /* or set an appropriate height and width */

但这会隐藏单元格中的溢出，但它们不会调整大小。

使用<div>元素，使用语义正确的HTML可能更容易进行布局，但需要查看标记。

Answer 2

您的表正在重新调整大小，因为您使用的是比例宽度。

有很多方法可以控制它。例如，通过以像素为单位设置或高度：

CSS:
table td {height: 20px;}

您的细胞将不再垂直重新调整大小。

Answer 3

很难确定，但是你没有在有问题的td上设置大小，只有填充。因此td将扩展以包含其中的任何内容。在某些浏览器中，这可能会改变焦点。

您可以尝试为td设置明确的宽度和高度（以ems或像素为单位）吗？

.pageContent table tr td
{
  padding: 5px 10px 5px 10px;
  width:8em;
  height:2em;
}

您可以发布一些标记，或者让我们知道单元格中的内容是什么？ （以及您遇到问题的浏览器）。