html - 不使用 div 的固定表头表头

Question

我想要固定宽度的表头，而不需要在表外使用 div 标签。我需要一些只需要更改 css 文件的解决方案。我试过将表格放在带有样式的侧 div 中:

width:100%;overflow-x:scroll

并且在最小化浏览器的高度和宽度时，它工作正常。

但这不是我想要的。我只想更改 css 样式，以避免更改我元素中的所有 jsp 文件

PSB 我的代码:

CSS

h3 {
    font: bold 1.2em Verdana, Helvetica, Arial, sans-serif;
    background: #B7BBD6;
    padding: 5px;
    margin: 10px 0 0 0;
    clear: both;
}
.list {
    float: left;
    width: 100%;
    color: #000099;
    border: 1px solid #DEDFDE;
    margin: 0 0 15px 0;
    overflow-x: scroll
}
.list th, .list td {
    vertical-align: top;
    border: 1px solid #B7BBD6
}
.even {
    background: #F1F1F1
}
/*.odd {background: #F1F1F1}*/
.odd {
    background: #FFF
}

HTML

<h3>Test Table</h3>

<table class="list">
        <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
            <th>d</th>
            <th>e</th>
            <th>f</th>
            <th>g</th>
            <th>h</th>
            <th>i</th>
        </tr>
        <tr class="odd">
            <td>98052826</a></td>
            <td>Company</td>
            <td>asdfsafdsa</td>
            <td>asdfsadf</td>
            <td>asdfsafs</td>
            <td>sadfsaf</td>
            <td>1234</td>
            <td>asfsdf</td>
            <td>asfsafdf</td>
        </tr>
        <tr class="even">
            <td>234568992</a></td>
            <td>Private</td>
            <td>asfsdfaf</td>
            <td>asfsaf</td>
            <td>safsdafsdf</td>
            <td>Some address</td>
            <td>3344</td>
            <td>&safsdafsda</td>
            <td>sadfsaddfdaf</td>
        </tr>
<table>

请推荐？？

Answer 1

将以下内容设置到您的 css 样式表中:

table{width: 100%;table-layout: fixed;}

编辑

如果你会使用 jQuery，那很简单:

$(document).ready(function(){
/*define table class then place your class here instead of 'table'*/
   var tablewidth =  $('table').width();
   /*define h3 class then place your class here instead of 'h3'*/
    $('h3').css('width',tablewidth - 10);
});

demo