Question

I have a table with fixed first column which will allow me to scroll the table columns left and right while keeping the first column in place.

(Entire table is in the wrapper that gives me the scrollbar as table is always wider than the wrapper.)

Table also has a toggle button on the header to show extra data in some td's.

When using Firefox, scrolling table to the right and then clicking the toggle button the entire first column disappears ...and this happens only in Firefox. How to fix that?

Here is the fiddle

HTML

<div class="da-fixed-column-table-wrapper" data-ng-app="testModule" data-ng-controller="testController">
<table class="da-fixed-column-table" border=1>
<thead>
  <tr>
    <th>
      <button ng-click="show=!show">show-hide</button>
    </th>
    <th>Header2</th>
    <th>Header3</th>
    <th>Header4</th>
    <th>Header5</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>first</td>
    <td>second</td>
    <td>third</td>
    <td>fourth</td>
    <td>fifth<span ng-show="show">more data</span></td>
  </tr>
  <tr>
    <td>first</td>
    <td>second</td>
    <td>third<span ng-show="show">more data</span></td>
    <td>fourth</td>
    <td>fifth</td>
  </tr>
   </tbody>
 </table>
</div>

CSS

.da-fixed-column-table-wrapper {
 width: 100%;
 overflow: auto;
 box-sizing: border-box;
 background: DarkKhaki;
}

.da-fixed-column-table {
 width: 120%;
 border-collapse: collapse;
 box-sizing: border-box;
 text-align: right;
}

.da-fixed-column-table tbody tr td:first-child,
.da-fixed-column-table thead tr th:first-child {
  position: absolute;
  border: none;
  top: auto;
  width: 8em;
  text-align: left;
  background: white;
}

.da-fixed-column-table thead tr th:nth-child(2),
.da-fixed-column-table tbody tr td:nth-child(2) {
 padding-left: 9em;
}

Answer 1

您只需添加left: 0即可确保元素正确粘贴。宽度的变化导致它移出视野。

.da-fixed-column-table tbody tr td:first-child,
.da-fixed-column-table thead tr th:first-child {
    position: absolute;
    border: none;
    top: auto;
    width: 8em;
    text-align: left;
    background: white;
    left: 0;
}

Fixed first column table first column disappears after td resize in firefox

1 个答案: