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

我正在为我的网站布局使用html表格。当我们按下一个单元格中的输入时，单元格正在调整大小。我用css来修复表格布局。表格布局不变，但单元格正在调整大小。

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

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

2010-02-20 Vibin Jith

在哪一点你准确地按下'enter'？ – 2010-02-20 10:46:37

尝试不使用表格进行页面布局。尽可能使用语义html。 DIVS非常适合布局。有了这个说法，请将您的网页发布到我们可以看到的地方，因为通过现场示例可以更容易地理解您的问题。 – pixeline 2010-02-20 10:47:21

@pixeline - 在这个问题中没有什么建议表格被用于布局。例如，它可能是一个报告表，在这种情况下，DIV可能是更糟糕的选择。 – Tom 2010-02-20 13:31:24

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

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

CSS: 
table td {height: 20px;}

您的单元格将不再垂直重新调整大小。

2010-02-20 13:29:36 Tom

这很难确定，但是您尚未在td上设置尺寸，只能填充。所以td将会扩展以包含里面的东西。在某些浏览器中，这可能会稍微改变一些焦点。

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

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

你可以发表一些你的标记，或让我们知道单元格中的内容是什么？（以及哪些浏览器出现问题）。

2010-02-20 10:50:14

您是否尝试过加入以下CSS

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

这将隐藏在细胞中溢出然而，但他们不会调整。

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

2010-02-20 10:50:32

回答