我可以创建一个宽度为百分比高度但像素精确的行高的 HTML 表格吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/495194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I create a HTML table width a percentage height but pixel accurate row heights?
提问by Baffled by ASP.NET
I need to create a table on a web page that has two rows. The table needs to fill the entire page so I have set the height and width of the table to 100% in the CSS stylesheet and the height of the HTML and body to 100% too.
我需要在有两行的网页上创建一个表格。表格需要填满整个页面，所以我在 CSS 样式表中将表格的高度和宽度设置为 100%，并将 HTML 和正文的高度也设置为 100%。
However, I need to top row of the table to be exactly 100 pixels in height and the second row to expand to fit the remainder of the table. When I set the height of the top row, it doesn't work.
但是，我需要表格的顶行正好是 100 像素的高度，第二行需要扩展以适应表格的其余部分。当我设置顶行的高度时，它不起作用。
Is this behavior possible? I tried the following but it doesn't work.
这种行为可能吗？我尝试了以下但它不起作用。
<table style="border-collapse:collapse;height:100%;width:100%;">
<tr>
<td style="border:solid 1px black;height:100px">1</td>
<td style="border:solid 1px black">2</td>
</tr>
<tr>
<td style="border:solid 1px black">3</td>
<td style="border:solid 1px black">4</td>
</tr>
</table>
Edit: I am using tabular data and specifically want to use a table, not divs. The sample above is to simplify a table with around 20 columns.
编辑：我使用表格数据，特别想使用表格，而不是 div。上面的示例是为了简化一个大约有 20 列的表格。
Edit 2: I have found the issue. It is the doctype definition in the HTML (added by Visual Studio). After removing...
编辑2：我发现了这个问题。它是 HTML 中的 doctype 定义（由 Visual Studio 添加）。删除后...
...it works perfectly. So my new question is, is this OK to do or is there a correct way to do it with the DOCTYPE?
...它完美地工作。所以我的新问题是，这可以做还是有正确的方法来使用 DOCTYPE？
回答by J__
Without CSS this works:
没有 CSS 这有效：
<html>
<body>
<table height="100%" width="100%" border="1">
<tr height="100">
<td>This is item text.</td>
</tr>
<tr>
<td>This is item text 2.</td>
</tr>
</table>
</body>
</html>
So it is possible, I'll try it now with CSS.
所以这是可能的，我现在就用 CSS 试试。
回答by J__
OK working with CSS.
可以使用 CSS。
HTML:
HTML：
<html>
<head>
<link href="table.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<tr class="fixed">
<td>This is item text.</td>
</tr>
<tr>
<td>This is item text 2.</td>
</tr>
</table>
</body>
</html>
CSS:
CSS：
table
{
border: 1px solid black;
height: 100%;
width: 100%;
}
tr.fixed
{
border: 1px solid black;
height: 100px;
}
td
{
border: 1px solid black;
}
回答by annakata
Well, there's me thinking I know how to do this, so I run out the code:
好吧，我想我知道如何做到这一点，所以我用完了代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
table
{
height: 100%;
width: 100%;
background-color: blue;
border-collapse:collapse;
}
tr#fixed
{
background: silver;
height: 100px;
}
tr#expand
{
background: gray;
}
td
{
text-align: center;
}
</style>
</head>
<body>
<table>
<tbody>
<tr id="fixed">
<td>100</td>
</tr>
<tr id="expand">
<td>*</td>
</tr>
</tbody>
</table>
</body>
</html>
(note, strict + CSS)
（注意，严格 + CSS）
And I find that although this works in Firefox, Chrome and anything !IE I like, IE has some veryunusual behaviour here. Long story short IE is disregarding the pixel dimensions and instead compares relative heights! It misreports this in the IE dev toolbar, but you can clearly see it if you add and change a height on tr#expand
我发现虽然这适用于 Firefox、Chrome 和任何我喜欢的 IE，但 IE在这里有一些非常不寻常的行为。长话短说 IE 不考虑像素尺寸，而是比较相对高度！它在 IE 开发工具栏中错误地报告了这一点，但是如果您在上添加和更改高度，您可以清楚地看到它tr#expand
If you set a height of 100px, you'll find both tr's actually render at 50%. At 200px, you'll get a 33/66 split, at 50px you'll get a 66/33 split! This seems to be true for other units like em, and I suspect it might be related to content since it has edge behaviour at low units like 5px. As far as I can see IE is outright broken here. This is not a bug I have seen before, nor one I've been able to google. Until a workaround suggests itself, it seems to me that you're SOL for a strict solution.
如果您将高度设置为 100 像素，您会发现两个 tr 的实际渲染率为 50%。在 200 像素处，您将获得 33/66 的分割，在 50 像素处，您将获得 66/33 的分割！对于像 em 这样的其他单位，这似乎是正确的，我怀疑这可能与内容有关，因为它在 5px 等低单位时具有边缘行为。据我所知，IE 在这里完全坏了。这不是我以前见过的错误，也不是我能够 google 的错误。直到有解决方法出现之前，在我看来，您是严格解决方案的 SOL。
回答by elbicho
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
html, body {
height:100%;
margin:0;
}
table {
background-color:#ccc;
width:100%;
height:100%;
}
th {
height:100px;
background-color:#fcfcfc;
}
</style>
<title>TableTest</title>
</head>
<body>
<table>
<tr>
<th>Header1</th>
<th>Header2</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
</tr>
</table>
</body>
</html>
This is what I believe a more semantic approach without using the id of class attributes in the table tags, taking advantage of the <th> tag to make the difference between both rows. This code doesn't work as intended in IE6/7, it might work in IE8, I tested it and works correctly in Firefox 3, Safari 3.1.2, Opera 9.50 and Camino 1.6.6.
我认为这是一种更语义化的方法，无需在表标签中使用类属性的 id，利用 <th> 标签来区分两行。此代码在 IE6/7 中无法正常工作，它可能在 IE8 中工作，我对其进行了测试并在 Firefox 3、Safari 3.1.2、Opera 9.50 和 Camino 1.6.6 中正常工作。
回答by cletus
Ok in light of new information (namely the tabular data), here is a solution:
好的，根据新信息（即表格数据），这是一个解决方案：
<html>
<head>
<style type="text/css">
#wrap { position: absolute; height: 100%; top: 0; right: 0; bottom: 0; left: 0; }
table { width: 100%; height: 100%; }
tr { margin: 0; }
td { text-align: center; font-size: 80px; font-weight: bold; color: white; }
#top { height: 100px; }
#bottom { height: 100%; }
#topleft { background-color: red; border: 3px solid black; }
#topright { background-color: green; border: 3px solid yellow; }
#bottomleft { background-color: yellow; border: 3px solid green; }
#bottomright { background-color: blue; border: 3px solid red; }
</style>
</head>
<body>
<div id="wrap">
<table>
<tr id="top">
<td id="topleft">1</td>
<td id="topright">2</td>
</tr>
<tr id="bottom">
<td id="bottomleft">3</td>
<td id="bottomright">4</td>
</tr>
</table>
</div>
</body>
</html>
I'll keep the one below for completeness if you want a non-tabular solution. There's no reason it can't be extended to a 2x2 grid either by use of floats or positioning:
如果你想要一个非表格的解决方案，我会保留下面的一个完整的。没有理由不能通过使用浮点数或定位将其扩展到 2x2 网格：
<html>
<head>
<style type="text/css" media="screen">
#wrap {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
#top {
width: 100%;
height: 100px;
position: relative;
top: 0;
background-color: #CCC;
}
#bottom {
position: relative;
height: 100%;
bottom: 0;
width: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="wrap">
<div id="top">Top</div>
<div id="bottom">Bottom</div>
</div>
</body>
</html>
回答by Rutesh Makhijani
You have given height only in one column of first row. Try to give height in both the columns or at the row level
您只在第一行的一列中给出了高度。尝试在列或行级别给出高度
回答by Toon Krijthe
Yes, you can combine all measurements. Just try it out in different browsers.
是的，您可以组合所有测量值。只需在不同的浏览器中尝试一下。
回答by Rutesh Makhijani
Tried the following code in IE7, Mozilla 2, Chrome 1, Opera 9.5, Safari 3.2 and it works
在 IE7、Mozilla 2、Chrome 1、Opera 9.5、Safari 3.2 中尝试了以下代码，它可以工作
<html>
<head>
</head>
<body>
<table height="100%" border="1">
<tr height="100px"><td>Some</td></tr>
<tr><td>Other</td></tr>
</table>
</body>
</html>
