Question

我已将包含表格标题的行放在固定位置，这使得它会滑动，我无法将其调整到表格的宽度，我尝试过很多东西，如宽度，调整大小，边距，等...

我在这里放置图片来解释它：

EXPANDED 的收缩

我在这里使用以下内容添加css：

table {
        border-collapse:collapse;
        table-layout: fixed;
        border: 2px solid #EA5D00;
}

tr {
        vertical-align: top;
}

tr:hover {
        background-color: #FFEDCC;
}

td {
        border: 1px solid #EA5D00;
        word-wrap: break-word;
        padding: 4px;
}

th {
        border-top: 1px solid #EA5D00;
        border-bottom: 2px solid #EA5D00;
        border-left: 1px solid #EA5D00;
        border-right: 1px solid #EA5D00;
        padding: 4px;
        color: #EA5D00;
        text-align: center;
        background-color: #FFEDCC;
}

tr.fixed { 
        position: fixed;
}

这里是html：

<table><tr class='fixed'><th>Línia</th><th>Registre</th><th>Context esquerra</th><th>Mot</th><th>Context dreta</th></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
     <tr><td align="right">1</td><TD ALIGN=RIGHT >233396:</TD><TD  ALIGN=RIGHT>  A Barcelona hi ha una cultura.....

Answer 1

好吧，假设你想让表格的标题相对于页面固定，这个问题并不像第一次那样简单。要探索所有选项，你可以谷歌像＆＃34; html table固定标题＆＃34;，但在这里我想分享一个可能适合你的特定情况的想法，因为我看到你的表占据了整个页面并开始从页面的一开始。

这个想法是：使用2个表！其中一个是固定的，有点重叠在另一个之后。当然，这两个必须有相同的标题，你必须知道最宽的行。

请注意，第一个不应包含可见行，第二个不应包含可见标题。最宽的行包含在第一个表中以设置尺寸。同样，对于特定情况，这是非常有限的解决方案。希望它会有所帮助：

＆＃13;

body {margin: 0;}
table {
        border-collapse: collapse;
        8border: 1px solid #EA5D00;
}

tr {
        vertical-align: top;
}

tr:hover {
        background-color: #FFEDCC;
}

td {
        border: 1px solid #EA5D00;
        word-wrap: break-word;
        padding: 4px;
}

th {
        border-top: 1px solid #EA5D00;
        /*border-bottom: 2px solid #EA5D00;*/
        border-left: 1px solid #EA5D00;
        border-right: 1px solid #EA5D00;
        padding: 4px;
        color: #EA5D00;
        text-align: center;
        background-color: #FFEDCC;
}

table:first-of-type { 
  position: fixed;
}
table:first-of-type tr:last-child {
  visibility: hidden;
}
table:last-of-type tr:first-child {
  visibility: hidden;
}

＆＃13;

<table>
<tr><th>Línia</th><th>Registre</th><th>Context esquerra</th><th>Mot</th><th>Context dreta</th></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
</table>

<table>
<tr><th>Línia</th><th>Registre</th><th>Context esquerra</th><th>Mot</th><th>Context dreta</th></tr>
<tr>
<td>Sed ut </td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
<tr>
<td>Sed ut perspiciatis unde</td>
<td>ut</td>
<td>perspiciatis</td>
<td>unde</td>
<td>Sed ut perspiciatis unde</td></tr>
</table>

＆＃13;

PS。而不是寻找最宽的行，你也可以硬编码每列的宽度。它也应该可以解决。

如何调整html表中固定行的宽度

1 个答案: