Html 表格标题的顶部和底部边框消失_Html_Css_Html Table_Internet Explorer 7

Html 表格标题的顶部和底部边框消失

html css

Html 表格标题的顶部和底部边框消失,html,css,html-table,internet-explorer-7,Html,Css,Html Table,Internet Explorer 7,我需要你的帮助每当用户向下滚动表格时，表格标题的上下边框都会消失。一旦用户到达表的底部，表格标题的顶部和底部边框将重新显示。你怎么解决这个问题？我使用的是IE7，需要符合特定浏览器的代码 <!DOCTYPE html> <html> <head> <style type="text/css"> /*------------------------------------------------------------------ Table

我需要你的帮助

每当用户向下滚动表格时，表格标题的上下边框都会消失。一旦用户到达表的底部，
表格标题的顶部和底部边框将重新显示。你怎么解决这个问题？我使用的是IE7，需要符合特定浏览器的代码

<!DOCTYPE html>
<html>
<head>

<style type="text/css">

/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
    color: #666;
    font-weight: bold;
    text-decoration:none;
}
table a:visited {
    color: #999999;
    font-weight:bold;
    text-decoration:none;
}
table a:active,
table a:hover {
    color: #bd5a35;
    text-decoration:underline;
}
table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    background:#eaebec;
    border-radius:3px;
    border-collapse:collapse; border-spacing: 0; 
    box-shadow: 0 1px 2px #d1d1d1;
}
table th {
    padding:10px 10px 10px 10px;
    border-top:1px solid #ccc;
    _border-bottom:1px solid #ccc;
    border-right: 1px solid #ccc;
    background: #ededed;
}   
table tr {
    text-align: center;
}   
table td {
    padding:10px;
    border-bottom:1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background: #fafafa;
}   
table tr:hover td {
    background: #f2f2f2;
}
table th, table td {
    width: 160px; 
}
#container {
    width: 740px;
    height: 300px;
    overflow-x: scroll;
    overflow-y: scroll;
    border-left: 1px solid #ccc;
}
table tr td:first-child, table tr th:first-child {
    border-left: 0;
}
table thead {
    _position:fixed;
    position: relative;
}
table thead tr {
    position: relative;
    top: expression(this.offsetParent.scrollTop);
}
table tr:first-child td {
    border-top: 1px solid #ccc;
}
</style>

</head>

<body>

<div id="container">

<table id="data">

    <!-- Table Header -->
    <thead>
        <tr>
            <th>Task Details</th>
            <th>Firstname</th>
            <th>Progress</th>
            <th>Vital Task</th>
        </tr>
    </thead>
    <!-- Table Header -->

    <!-- Table Body -->
    <tbody>

        <tr>
            <td>Create pretty table design</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr><!-- Table Row -->

        <tr>
            <td>Take the dog for a walk</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr><!-- Darker Table Row -->

        <tr>
            <td>Waste half the day on Twitter</td>
            <td>&nbsp;</td>
            <td>20%</td>
            <td>No</td>
        </tr>

        <tr>
            <td>Feel inferior after viewing Dribble</td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td>No</td>
        </tr>

        <tr>
            <td>Wince at &quot;to do&quot; list</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr>

        <tr>
            <td>Vow to complete personal project</td>
            <td>&nbsp;</td>
            <td>23%</td>
            <td>yes</td>
        </tr>

        <tr>
            <td>Procrastinate</td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td>No</td>
        </tr>

        <tr>
            <td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td><a href="#inexistent-id">Another</a></td>
        </tr>

    </tbody>
    <!-- Table Body -->

</table>

</div>

</body>
</html>


/*------------------------------------------------------------------
桌式
------------------------------------------------------------------ */
表a：链接{
颜色：#666；
字体大小：粗体；
文字装饰：无；
}
表a：参观人数{
颜色：#999999；
字体大小：粗体；
文字装饰：无；
}
表a：现行，
表a：悬停{
颜色：#bd5a35；
文字装饰：下划线；
}
桌子{
字体系列：Arial、Helvetica、无衬线字体；
颜色：#666；
字体大小：12px；
背景：#eaebec；
边界半径：3px；
边框折叠：折叠；边框间距：0；
盒影：0 1px 2px#d1d1；
}
表th{
填充：10px 10px 10px 10px；
边框顶部：1px实心#ccc；
_边框底部：1px实心#ccc；
右边框：1px实心#ccc；
背景：#ededed；
}   
表tr{
文本对齐：居中；
}   
表td{
填充：10px；
边框底部：1px实心#ccc；
左边框：1px实心#ccc；
右边框：1px实心#ccc；
背景：#fafafa；
}   
表tr：悬停td{
背景#f2f2；
}
表th、表td{
宽度：160px；
}
#容器{
宽度：740px；
高度：300px；
溢出-x：滚动；
溢出y：滚动；
左边框：1px实心#ccc；
}
表tr td:第一个孩子，表tr th:第一个孩子{
左边框：0；
}
餐桌{
_位置：固定；
位置：相对位置；
}
表thead tr{
位置：相对位置；
top：表达式（this.offsetParent.scrollTop）；
}
表tr：第一胎td{
边框顶部：1px实心#ccc；
}
任务详细信息
名字
进展
要务
创建漂亮的桌面设计
100%
对
带狗去散步
100%
对
在推特上浪费半天时间
20%
不
看完运球后感到自卑
80%
不
在“待办事项”列表中退出
100%
对
发誓要完成个人项目
23%
对
拖延
80%
不
80%

我刚刚在下面修改了你的CSS代码，请尝试一下

table thead {
    position:fixed;

}
table thead tr {
    position: relative;

}

我刚刚修改了你的CSS代码，请试试这个

table thead {
    position:fixed;

}
table thead tr {
    position: relative;

}

在第二天用一组新的眼睛玩弄了一些css之后，以下内容适用于IE7：

<style type="text/css">

/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
    color: #666;
    font-weight: bold;
    text-decoration:none;
}
table a:visited {
    color: #999999;
    font-weight:bold;
    text-decoration:none;
}
table a:active,
table a:hover {
    color: #bd5a35;
    text-decoration:underline;
}
table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    background:#eaebec;
    border-radius:3px;
    border-collapse:collapse; border-spacing: 0; 
    box-shadow: 0 1px 2px #d1d1d1;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
table th {
    padding:10px 10px 10px 10px;
    border-bottom:1px solid #ccc;
    border-left: 1px solid #ccc;
    background: #ededed;
}   
table tr {
    text-align: center;
}   
table td {
    padding:10px;
    border-bottom:1px solid #ccc;
    border-left: 1px solid #ccc;

    background: #fafafa;
}   
table tr:hover td {
    background: #f2f2f2;
}
table th, table td {
    width: 160px; 
}
#container {
    width: 800px;
    height: 300px;
    overflow-x: scroll;
    overflow-y: scroll;
}
table tr td:first-child, table tr th:first-child {
    border-left: 0;
}

table thead {
    position:fixed;

}

TABLE THEAD TR TH {
    top:expression(this.offsetParent.scrollTop);
    border-top:1px solid #ccc;
    position:relative;
}

table tr:first-child td {
    border-top: 0;
}
</style>


/*------------------------------------------------------------------
桌式
------------------------------------------------------------------ */
表a：链接{
颜色：#666；
字体大小：粗体；
文字装饰：无；
}
表a：参观人数{
颜色：#999999；
字体大小：粗体；
文字装饰：无；
}
表a：现行，
表a：悬停{
颜色：#bd5a35；
文字装饰：下划线；
}
桌子{
字体系列：Arial、Helvetica、无衬线字体；
颜色：#666；
字体大小：12px；
背景：#eaebec；
边界半径：3px；
边框折叠：折叠；边框间距：0；
盒影：0 1px 2px#d1d1；
左边框：1px实心#ccc；
右边框：1px实心#ccc；
}
表th{
填充：10px 10px 10px 10px；
边框底部：1px实心#ccc；
左边框：1px实心#ccc；
背景：#ededed；
}   
表tr{
文本对齐：居中；
}   
表td{
填充：10px；
边框底部：1px实心#ccc；
左边框：1px实心#ccc；
背景：#fafafa；
}   
表tr：悬停td{
背景#f2f2；
}
表th、表td{
宽度：160px；
}
#容器{
宽度：800px；
高度：300px；
溢出-x：滚动；
溢出y：滚动；
}
表tr td:第一个孩子，表tr th:第一个孩子{
左边框：0；
}
餐桌{
位置：固定；
}
表THAD TR TH{
top：表达式（this.offsetParent.scrollTop）；
边框顶部：1px实心#ccc；
位置：相对位置；
}
表tr：第一胎td{
边界顶部：0；
}

在第二天用一副新的眼睛玩弄了一些css之后，IE7的工作原理如下：

<style type="text/css">

/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
    color: #666;
    font-weight: bold;
    text-decoration:none;
}
table a:visited {
    color: #999999;
    font-weight:bold;
    text-decoration:none;
}
table a:active,
table a:hover {
    color: #bd5a35;
    text-decoration:underline;
}
table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    background:#eaebec;
    border-radius:3px;
    border-collapse:collapse; border-spacing: 0; 
    box-shadow: 0 1px 2px #d1d1d1;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
table th {
    padding:10px 10px 10px 10px;
    border-bottom:1px solid #ccc;
    border-left: 1px solid #ccc;
    background: #ededed;
}   
table tr {
    text-align: center;
}   
table td {
    padding:10px;
    border-bottom:1px solid #ccc;
    border-left: 1px solid #ccc;

    background: #fafafa;
}   
table tr:hover td {
    background: #f2f2f2;
}
table th, table td {
    width: 160px; 
}
#container {
    width: 800px;
    height: 300px;
    overflow-x: scroll;
    overflow-y: scroll;
}
table tr td:first-child, table tr th:first-child {
    border-left: 0;
}

table thead {
    position:fixed;

}

TABLE THEAD TR TH {
    top:expression(this.offsetParent.scrollTop);
    border-top:1px solid #ccc;
    position:relative;
}

table tr:first-child td {
    border-top: 0;
}
</style>


/*------------------------------------------------------------------
桌式
------------------------------------------------------------------ */
表a：链接{
颜色：#666；
字体大小：粗体；
文字装饰：无；
}
表a：参观人数{
颜色：#999999；
字体大小：粗体；
文字装饰：无；
}
表a：现行，
表a：悬停{
颜色：#bd5a35；
文字装饰：下划线；
}
桌子{
字体系列：Arial、Helvetica、无衬线字体；
颜色：#666；
字体大小：12px；
背景：#eaebec；
边界半径：3px；
边框折叠：折叠；边框间距：0；
盒影：0 1px 2px#d1d1；
左边框：1px实心#ccc；
右边框：1px实心#ccc；
}
表th{
填充：10px 10px 10px 10px；
边框底部：1px实心#ccc；
左边框：1px实心#ccc；
背景：#ededed；
}   
表tr{
文本对齐：居中；
}   
表td{
填充：10px；
边框底部：1px实心#ccc；
左边框：1px实心#ccc；
背景：#fafafa；
}   
表tr：悬停td{
背景#f2f2；
}
表th、表td{
宽度：160px；
}
#容器{
宽度：800px；
高度：300px；
溢出-x：滚动；
溢出y：滚动；
}
表tr td:第一个孩子，表tr th:第一个孩子{
左边框：0；
}
助教