2

我想要具有固定宽度的表头而不在表外使用 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>

请建议？？

4

2 回答 2

0

将以下内容设置为您的 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);
});

演示

于 2013-08-08T09:36:25.697 回答
0 
h3{
    position:fixed;
    width:100%
  }
  table{
    top:60px;
    position:relative;
  }

演示

于 2013-08-08T09:43:22.450 回答