Question

如果您查看表格中<th>标记中的所有<thead>标记，您可以看到每个标记是否都有自己的类：col1，col2，col3，col4 ... col9 I表格中也有一个<thead>。

现在除了桌面标题之外，css中的所有内容都适用于桌子。问题是我有一个滚动表，因为我有一个滚动表我不希望我的表标题与表滚动。因为我需要这个#tableWrapper thead tr，问题虽然这个是thead的宽度和表标题的宽度（th），它们不会像整个表一样宽（99％），它是大约60％左右，现在如果我没有这个，我将能够将表格标题设置为正确的大小，并且与表格一样宽，但这意味着表格标题将滚动到表格所以我需要thead。但问题是<thead> and <th>并不像表那么宽，为什么会这样。

下面是表格代码：

<div id="tableWrapper">
<div id="tableScroll">
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="col1">Question No</th>
<th class="col2">Question</th>
<th class="col3">Option Type</th>
<th class="col4">Duration</th>
<th class="col5">Weight(%)</th>
<th class="col6">Answer</th>
<th class="col7">Video</th>
<th class="col8">Audio</th>
<th class="col9">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td class="qid"><?php echo $i; ?></td>
<td class="question"></td>
<td class="options"></td>
<td class="duration"></td>
<td class="weight"></td>
<td class="answer"></td>
<td class="video"></td>
<td class="audio"></td>
<td class="image"></td>
</tr>
</tbody>

以下是css;

            /*css for QandATable.php*/

            #qandatbl{ //table
                font-size:14px;
                border-collapse:collapse;
                text-align:center;
                margin-left:auto; 
                margin-right:auto;
                width:99%;
            }
            .col1{
            background-color:#FEFEF2;
            width:7%;
            border: 1px solid black;
            }
            .col2{
            background-color:#FCF6CF;
            width:16%;
            border: 1px solid black;    
            }   
            .col3{
            background-color:#FEFEF2; 
        width:7%;
            border: 1px solid black;
            }
            .col4{
            background-color:#FCF6CF;
        width:7%;
            border: 1px solid black;
            }

           .col5{
            background-color:#FEFEF2;
            width:7%;
            border: 1px solid black;
            }
            .col6{
            background-color:#FCF6CF;
            width:7%;
            border: 1px solid black;    
            }   
            .col7{
            background-color:#FEFEF2; 
        width:16%;
            border: 1px solid black;
            }
            .col8{
            background-color:#FCF6CF;
        width:16%;
            border: 1px solid black;
            }
                .col9{
            background-color:#FCF6CF;
        width:16%;
            border: 1px solid black;
            }

#tableWrapper {
  position:relative;
}
#tableScroll {
  height:300px;
  overflow:auto;  
  margin-top:20px;
}

#tableWrapper thead {
position:absolute;
top:-24px;
width:99%;
}`enter code here`

Answer 1

这似乎适用于IE 6+和Firefox。请让我知道别人做什么或不做什么：

http://spruce.flint.umich.edu/~jalarie/jaa_kee.htm

Answer 2

从我所看到的，你不能用CSS做到这一点。

HTML table with fixed headers?

HTML table with fixed headers and a fixed column?

上面的链接中有一些解决方案，但它们在某些方面都崩溃了（IE7，Safari和IE9是主要的罪魁祸首。如果你真的想要这个，我会考虑使用javascript。有jQuery插件的区域数量这可以做到这一点。

并且不匹配表的宽度

2 个答案: