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

Question

我已将包含表格标题的行放在固定位置，这使它缩水，我无法将其调整为表格的宽度，我尝试了很多东西，例如宽度、调整大小、边距、等等……

这里我放图片来解释一下：

扩展 收缩

我在这里添加我正在使用的 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

好吧，假设您想让表格的标题相对于页面固定，这个问题并不像最初看起来那么简单。要探索所有选项，您可以搜索“html table fixed header”之类的内容，但在这里我想分享一个可能适合您的特定情况的想法，因为我看到您的表格占据了整个页面并从一开始就开始这页纸。

想法是：使用 2 张桌子！其中一个是固定的，并且有点重叠在它之后的另一个。当然，两者必须具有相同的标题，并且您必须知道最宽的行。

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

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;
}
   

<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>

附言。而不是寻找最宽的行，您也可以硬编码每列的宽度。我猜应该也能解决。