表布局上的标题位置 [英] Header position on Table layout
问题描述
大家好，我可以做一点帮助..我一直在拼凑一些代码，制作一个带有固定标题的表，并且有一些亮起的行。我认为id得到了它但我注意到当我向下滚动并将光标放在上面并且行poof进入标题时，即使删除整个代码中的所有间距，我也似乎无法从标题单元格中获取间距。如果你能帮忙那就太好了。 :) [html]
<！DOCTYPE html PUBLIC" - // W3C // DTD HTML 4.01 Transitional // EN"
" http：// www .w3.org / TR / html4 / loose.dtd">
< html>
< head>
< title>表格中的可点击行< / title>
< style type =" text / css">
/ * fixedHeader是THEAD的类，TR是属性* /
thead.fixedHeader tr
{
职位：绝对;
}
/ *设置TH属性的属性。在这里注意TH。它用来代替TD。 * /
thead.fixedHeader td
{
border-left：＃eb8 1px solid;
border-右：＃b34 1px solid;
border-top：＃eb8 1px solid;
font-weight：bold;
/ *更改此处的颜色代码以更改固定标题的背景颜色* /
背景：＃c56;
/ * #fff是固定标题字体的颜色代码* /
颜色：#fff;
/ *你可以使用''justify' '，''左''，''右''或''中'''这里* /
text-align：center
}
tr.hovered {background：PeachPuff; cursor：pointer;} / *悬停效果* /
/ *使tableContainer类DIV * /
div.tableContainer
{
clear：both;
overflow：auto;
/ *设置BORDER属性* /
边框：＃000 1px solid;
/ *设置容器的宽度和高度* /
宽度：616px;
身高：300px;
}
div.tableContainer table
{
cellspacing：0px;
float：left;
宽度：600px;
身高：100％; < br $>
}
< / style>
< script type =" text / javascript">
function rowHover（）
{
var tables = document.getElementsByTagName（''table''）;
for（var i = 0; i< tables.length; i ++）
{
var trs = tables [i]。 getElementsByTagName（''tr''）;
for（var j = 1，len = trs.length; J< LEN; j ++）
{
trs [j] .onmouseover = function（）{this.className =''hovered''; }
trs [j] .onmouseout = function（）{this.className =''''; }
}
}
}
window.onload = rowHover;
< / script>
< / head>
< body>
< div id =" container">
< div class =" tableContainer">
< table>
< thead class =" fixedHeader"> ;
< tr>
< td width =" 28％"> Station< / td>
< td width =" 28％"> Date< / td>
< td width =" 28％">状态< / td>
< td width =" 16％">检查< ; / td>
< / tr>
< / thead>
< tbody>
< tr>
< td> KABC< / td>
< td> 09/12 / 2002< / td>
< td>提交< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> KCBS< / td>
< td> 09/11/2002< / td>
< td>锁定< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> WFLA< / td>
< td> 09/11/2002< / td>
< td>提交< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> WTSP< / td>
< td> 09/15/2002< / td>
< td>正在进行< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> WROC< / td>
< td> 10/11/2002< / td>
< td>提交< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> WPPP< / td>
< td> 09/16/2002< / td>
< td>正在进行< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> WRRR< / td>
< td> 09/06 / 2002< / td>
< td>提交< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> WTTT< / td>
< td> 09/21/2002< / td>
< td>正在进行< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> W000< / td>
< td> 11/11/2002< / td>
< td>提交< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> KABC< / td>
< td> 10/01/2002< / td>
< td>提交< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> KCBS< / td>
< td> 10/18/2002< / td>
< td>锁定< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> WFLA< / td>
< td> 10/18/2002< / td>
< td>提交< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> WTSP< / td>
< td> 10/19/2002< / td>
< td>正在进行< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> WROC< / td>
< td> 07/18/2002< / td>
< td>提交< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> WPPP< / td>
< td> 10/28/2002< / td>
< td>正在进行< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> WRRR< / td>
< td> 10/28/2002< / td>
< td>提交< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> WTTT< / td>
< td> 10/08/2002< / td>
< td>正在进行< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> WIL0< / td>
< td> 10/18/2001< / td>
< td>提交< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> KABC< / td>
< td> 04/18/2002< / td>
< td>提交< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> KCBS< / td>
< td> 10/05 / 2001< / td>
< td>锁定< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< tr>
< td> WFLA< / td>
< td> 10/18/2002< / td>
< td>提交< / td>
< td>< input type =''复选框''name =''sel''value =''''>< / td>
< / tr>
< / tbody>
< / table>
< / div>
< / div> <！ - 结束容器 - >
< / body>
< / html>
[/ html]
没有像PeachPuff这样的标准颜色。
有没有''cellspacing''这样的CSS属性。
你定位的标题是''绝对''。绝对定位将该元素从正常流中移除，从而允许其他元素取代它。只需删除该定位，问题就解决了，除非有其他原因可以解决。
为什么使用过渡文档类型？
< blockquote class =post_quotes>
没有像PeachPuff这样的标准颜色。
没有像'cellspacing'这样的CSS属性。
那个标题你定位为''绝对''。绝对定位将该元素从正常流中移除，从而允许其他元素取代它。只需删除该定位，问题就解决了，除非有其他原因可以解决。
为什么使用过渡文档类型？
peachpuff是从网站复制而来的，工作正常（桃色）
我从阅读中得到了印象教程，需要doctype使用绝对，以保持标题在同一位置。我必须删除cellspacing变量，看看它有多大帮助：s目前所有人都在猜测。我试图模仿这里完成的这个表：http：//home.tampabay.rr.com/bmerkey/examples/clickable-table-rows.html但CSS没有给出。
我希望如果不是因为我一直试图在IE中做到这一点Mozilla让它看起来更加性感。
Hello people, I could do with a little help.. I have been piecing some code together to make a table with a fixed header and that has light up rows. I thought id got it but I notice when i scroll down and the put the cursor over and row poof goes the header, also I couldn''t seem to get the spacing off the header cells even when deleting all spacings throughout the code. If you could please help that would be great. :) [html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Clickable Rows in Tables</title>
<style type="text/css">
/* fixedHeader is the class of THEAD and TR is the property */
thead.fixedHeader tr
{
position: absolute;
}
/* Sets the attribute for TH property. Watch out for the TH here. It is used instead of TD. */
thead.fixedHeader td
{
border-left: #eb8 1px solid;
border-right: #b34 1px solid;
border-top: #eb8 1px solid;
font-weight: bold;
/* Change the color code here to change the fixed header''s background color */
background: #c56;
/* #fff is the color code for the fixed header''s font */
color: #fff;
/* you can use ''justify'', ''left'', ''right'' or ''center'' here */
text-align: center
}
tr.hovered { background:PeachPuff; cursor: pointer;} /*hover effect */
/* makes tableContainer Class of DIV */
div.tableContainer
{
clear: both;
overflow: auto;
/* Sets the BORDER properties */
border: #000 1px solid;
/* Sets Width and Height of the container */
width: 616px;
height: 300px;
}
div.tableContainer table
{
cellspacing: 0px;
float: left;
width: 600px;
height: 100%;
}
</style>
<script type="text/javascript">
function rowHover()
{
var tables=document.getElementsByTagName(''table'');
for (var i=0;i<tables.length;i++)
{
var trs=tables[i].getElementsByTagName(''tr'');
for(var j=1, len=trs.length; j<len; j++)
{
trs[j].onmouseover=function() { this.className=''hovered''; }
trs[j].onmouseout=function() { this.className=''''; }
}
}
}
window.onload = rowHover;
</script>
</head>
<body>
<div id="container">
<div class="tableContainer">
<table>
<thead class="fixedHeader">
<tr>
<td width="28%">Station</td>
<td width="28%">Date</td>
<td width="28%">Status</td>
<td width="16%">Check</td>
</tr>
</thead>
<tbody>
<tr>
<td>KABC</td>
<td>09/12/2002</td>
<td>Submitted</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>WFLA</td>
<td>09/11/2002</td>
<td>Submitted</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>WTSP</td>
<td>09/15/2002</td>
<td>In-Progress</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>WPPP</td>
<td>09/16/2002</td>
<td>In-Progress</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>WRRR</td>
<td>09/06/2002</td>
<td>Submitted</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>WTTT</td>
<td>09/21/2002</td>
<td>In-Progress</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>W000</td>
<td>11/11/2002</td>
<td>Submitted</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>KABC</td>
<td>10/01/2002</td>
<td>Submitted</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>KCBS</td>
<td>10/18/2002</td>
<td>Lockdown</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>WFLA</td>
<td>10/18/2002</td>
<td>Submitted</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>WTSP</td>
<td>10/19/2002</td>
<td>In-Progress</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>WROC</td>
<td>07/18/2002</td>
<td>Submitted</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>WPPP</td>
<td>10/28/2002</td>
<td>In-Progress</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>WRRR</td>
<td>10/28/2002</td>
<td>Submitted</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>WTTT</td>
<td>10/08/2002</td>
<td>In-Progress</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>WIL0</td>
<td>10/18/2001</td>
<td>Submitted</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>KABC</td>
<td>04/18/2002</td>
<td>Submitted</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>KCBS</td>
<td>10/05/2001</td>
<td>Lockdown</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
<tr>
<td>WFLA</td>
<td>10/18/2002</td>
<td>Submitted</td>
<td><input type=''checkbox'' name=''sel'' value=''''></td>
</tr>
</tbody>
</table>
</div>
</div> <!-- end container -->
</body>
</html>
[/html]
There is no such standard color as "PeachPuff".
There is no such CSS property as ''cellspacing''.
That header you are positioning as ''absolute''. Absolute positioning removes that element from the normal flow allowing other elements to take its place. Just remove that positioning and the problem is solved unless there are other reasons to do that.
Why are you using the transitional doctype?
There is no such standard color as "PeachPuff".
There is no such CSS property as ''cellspacing''.
That header you are positioning as ''absolute''. Absolute positioning removes that element from the normal flow allowing other elements to take its place. Just remove that positioning and the problem is solved unless there are other reasons to do that.
Why are you using the transitional doctype?The peachpuff was copied from a site and it works fine (peachy colour)
I got the impression from reading a tutorial that doctype was needed to used the absolute which is ment to keep the header in the same position. Ill have to remove the cellspacing variable see how that helps :s Its all abit of a guess at the moment. I am trying to emulate this table done here : http://home.tampabay.rr.com/bmerkey/examples/clickable-table-rows.html but the CSS isn''t given.
I do hope if not just because I have been trying to do it in IE Mozilla makes it look so much sexier.
这篇关于表布局上的标题位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
