Question

我有一个html表，其中2行固定在顶部，因此它们不会随数据一起滚动。

首先，这是适用于表格的CSS：

#dataTable {
   table-layout: fixed;
   border-collapse: collapse;
   height: 100%;
}
#dataTable tbody {
   display: block;
   width: 100%;
   height: 400px;
   overflow: auto;
}
#dataTable thead tr {
   display: block;
}
#dataTable thead tr td input{
   width: 101px;
}
#dataTable thead {
   background: #bababa;
}
table thead {
   display: table-header-group;
}
table tbody {
   display: table-row-group;
}
td,
th {
   min-width: 38px;
   border: dashed 1px lightblue;
   padding: 0 !important;
   text-overflow: ellipsis;
}
td:not(:first-of-type),
th:not(:first-of-type) {
   min-width: 105px;
   border: dashed 1px lightblue;
   overflow: hidden;
   text-overflow: ellipsis;
}
tbody tr:nth-of-type(even) {
   background-color: #e7eff7;
}
/* Overrides */
table#dataTable.xLookup {
   table-layout: auto !important;
   width: auto !important;
}
table#dataTable.xLookup td {
   padding: 0 !important;
   border-bottom: none !important;
   padding-right: 0 !important;
}
table.xLookup tr.xActiveFilter td {
   vertical-align: middle;
   min-width: 105px;
}
table#dataTable.xLookup tr.xActiveFilter td > input {
   margin: 0 !important;
}

接下来，这是html表：

<table id="dataTable" class="xLookup" cellspacing="0">
   <thead>
      <tr>
         <th class="xSelBox">&nbsp;</th>
         <th id="col0" title="Sort on Option ID" sort="A" index="0" style="width: 100px; cursor: pointer;">Option ID</th>
         <th id="col1" title="Sort on Description" sort="" index="1" style="cursor: pointer;">Description</th>
         <th id="col2" title="Sort on Quantity" sort="" index="2" style="width: 55px; cursor: pointer;">Quantity</th>
         <th id="col3" title="Sort on Material" sort="" index="3" style="cursor: pointer;">Material</th>
         ... lots more <th> ...
      </tr>
      <tr class="xActiveFilter">
         <th class="xFilterHdr">&nbsp;</th>
         <td><input type="text" id="f0"></td>
         <td><input type="text" id="f1"></td>
         <td><input type="text" id="f2"></td>
         <td><input type="text" id="f3"></td>
         ... lots more <td> ...
      </tr>
   </thead>
   <tbody id="PickerTBODY" style="height: 469px;">
      <tr tabindex="0" tracked="false" class="">
         <td class="xSelBox"><input type="radio" name="chk0" optcount="0" id="c_000Q"></td>
         <td class="xPickerIDColumn" title="nj option #1">00_nj_option_1</td>
         <td>nj option #1</td>
         <td>1</td>
         <td>2</td>
      </tr>
      ... lots more rows ...
   </tbody>
</table>

只要我的min-width等于或大于125像素，一切都很好，但这就是问题所在：只要我变得比这窄得多，标题列文本就会超过其下方列的宽度，并且列不再对齐。您越靠近列，就越偏离列。如何强制标题列（标签和输入）始终与其下方的数据单元对齐？

当列超出所需的列宽时，如何通过截断任何文本（或输入控件）（在标题和数据单元格中）来强制列对齐？（请注意，我已经设置了text-overflow: ellipsis，但这似乎没有任何作用）
或者，如何通过在标题和列单元格值中包装任何文本（并截断输入控件）来强制列对齐？

谢谢。

标题固定后，如何获取列宽以对齐？

0 个答案: