2014-09-26 56 views
0

我只是无法弄清楚什么是问题,我有一个HTML表,我想让表头保持在一个固定的位置,保持最长td的宽度。我需要它的脚本和th元素必须是固定的宽度没有JavaScript和简单的CSS 使表头保持在一个固定的位置,并保持最长的宽度td

BODY { 
 
     font-family: Arial; 
 
     font-size: 8pt 
 
    } 
 
    .focim { 
 
     margin-left: 400px; 
 
     color: Black; 
 
     font-family: Arial; 
 
     font-size: 15pt; 
 
     font-weight: 900; 
 
     padding-bottom: 20px; 
 
     text-decoration: underline 
 
    } 
 
    Time { 
 
     color: Black; 
 
     font-family: Arial; 
 
     font-size: 10pt; 
 
     font-weight: 500; 
 
     padding-bottom: 20px 
 
    } 
 
    TABLE { 
 
     border-width: 3px; 
 
     border-style: solid; 
 
     border-color: Black; 
 
     border-collapse: collapse; 
 
    } 
 
    TH { 
 
     font-family: Arial; 
 
     font-size: 10pt; 
 
     border-width: 1px; 
 
     border-style: solid; 
 
     border-color: Black; 
 
     background: #b3b3b3; 
 
    } 
 
    TR:first-child { 
 
     position: fixed; 
 
     margin-top: 0px; 
 
     white-space: nowrap; 
 
    } 
 
    TD { 
 
     white-space: nowrap; 
 
     border-width: 1px; 
 
     padding: 3px; 
 
     border-style: solid; 
 
     border-color: Black 
 
    } 
 
    TD:first-child { 
 
     background-color: #C19A6B; 
 
     padding-right: 5px; 
 
     padding-left: 5px 
 
    } 
 
    TR:nth-child(even) { 
 
     background-color: #dddddd; 
 
    } 
 
    tr:hover td { 
 
     background: #4E5066; 
 
     color: #FFFFFF; 
 
     border-top: 1px solid #22262e; 
 
     border-bottom: 1px solid #22262e; 
 
    }
<table> 
 
    <colgroup> 
 
    <col/> 
 
    <col/> 
 
    <col/> 
 
    <col/> 
 
    </colgroup> 
 
    <tr> 
 
    <th>Name</th> 
 
    <th>IP_Addresses0</th> 
 
    <th>Domain</th> 
 
    <th>LocalPath0</th> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 

 

 

 
</table>

+0

什么是你遇到的问题? – 2014-09-26 09:11:07

+0

可能的重复http://stackoverflow.com/questions/673153/html-table-with-fixed-headers – 2014-09-26 09:16:18

回答

0

尝试这样的例子。

BODY { 
 
    font-family: Arial; 
 
    font-size: 8pt 
 
} 
 
.focim { 
 
    margin-left: 400px; 
 
    color: Black; 
 
    font-family: Arial; 
 
    font-size: 15pt; 
 
    font-weight: 900; 
 
    padding-bottom: 20px; 
 
    text-decoration: underline 
 
} 
 
Time { 
 
    color: Black; 
 
    font-family: Arial; 
 
    font-size: 10pt; 
 
    font-weight: 500; 
 
    padding-bottom: 20px 
 
} 
 
TABLE { 
 
    border-width: 3px; 
 
    border-style: solid; 
 
    border-color: Black; 
 
    border-collapse: collapse; 
 
} 
 
TH { 
 
    font-family: Arial; 
 
    font-size: 10pt; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: Black; 
 
    background: #b3b3b3; 
 
} 
 
TR:first-child { 
 
    position: fixed; 
 
    left: 10px; 
 
} 
 
TD { 
 
    white-space: nowrap; 
 
    border-width: 1px; 
 
    padding: 3px; 
 
    border-style: solid; 
 
    border-color: Black 
 
} 
 
TD:first-child { 
 
    background-color: #C19A6B; 
 
    padding-right: 5px; 
 
    padding-left: 5px 
 
} 
 
TR:nth-child(even) { 
 
    background-color: #dddddd; 
 
} 
 
tr:hover td { 
 
    background: #4E5066; 
 
    color: #FFFFFF; 
 
    border-top: 1px solid #22262e; 
 
    border-bottom: 1px solid #22262e; 
 
}
<table> 
 
    <colgroup> 
 
    <col/> 
 
    <col/> 
 
    <col/> 
 
    <col/> 
 
    </colgroup> 
 
    <tr> 
 
    <th>Name</th> 
 
    <th>IP_Addresses0</th> 
 
    <th>Domain</th> 
 
    <th>LocalPath0</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Name</th> 
 
    <th>IP_Addresses0</th> 
 
    <th>Domain</th> 
 
    <th>LocalPath0</th> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 
    <tr> 
 
    <td>name</td> 
 
    <td>someip</td> 
 
    <td>domain</td> 
 
    <td>path</td> 
 
    </tr> 
 

 

 

 
</table>

+0

我之前试过这个演示,主要问题是,我不能添加dvis,因为脚本生成表格并且宽度不应该固定,宽度应该与每个th-td连接使用最长的字段一起使用white-space:nowrap; – LeviD77 2014-09-26 09:40:13

+0

我编辑了我的答案,我又放了一个相同的标题,并且已经给'tr:first-child'定位了'position:fixed;'。告诉我你喜欢这个解决方案或不。 – 2014-09-26 09:52:28

+0

是的,关于这是我想要的,只是在这种情况下,标题是固定的,但不够宽,th元素不在td元素上方 – LeviD77 2014-09-26 12:17:40