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

Answer 2

h3{
    position:fixed;
    width:100%
  }
  table{
    top:60px;
    position:relative;
  }

demo

表头没有使用div的固定头

2 个答案: