用rowspan修复了第一个表列

Question

我正在使用一个简单的表模板来修复第一列。在许多用例中工作正常，但如果使用“ rowspan”。

HTML：

<table>
  <tbody>
    <tr>
      <td class='first'>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td class='first' rowspan='3'>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td class='first'>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

CSS：

table td {
  border: 1px solid red;
  background: lightpink;
  min-width: 100px;
  max-width: 100px;
  width: 100px;
  height: 20px;
}

table td.first:nth-child(1) {
  border: 1px solid blue;
  background: lightblue;
  position: relative;
  display: block;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
}

table tbody {
  position: relative;
  display: block; 
  overflow: scroll; 
  width: 500px;
}

table {
  position: relative;
  overflow: hidden; 
  border: 1px solid black;
}

JS（jQuery）：

$('tbody').scroll(function(e) { 
  $('td.first:nth-child(1)').css("left", $("tbody").scrollLeft());
});

我需要具有特定宽度的第一列。以及所有其他具有不同宽度的列。 不幸的是，如果使用“ rowspan”，并且每行的第一块TD都设置为“ Display：block”，则它不起作用。

请参阅我的示例： https://jsfiddle.net/zqjcjcjcjc9h0p/2/

Answer 1

您可以替换显示：block用显示：table-cell：

$('tbody').scroll(function(e) { 
  $('td.first:nth-child(1)').css("left", $("tbody").scrollLeft());
});

table td {
  border: 1px solid red;
  background: lightpink;
  min-width: 100px;
  max-width: 100px;
  width: 100px;
  height: 20px;
}

table td.first:nth-child(1) {
  border: 1px solid blue;
  background: lightblue;
  position: relative;
  display: table-cell;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
}

table tbody {
  position: relative;
  display: block; 
  overflow: scroll; 
  width: 500px;
}

table {
  position: relative;
  overflow: hidden; 
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class='first'>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td class='first' rowspan='3'>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td class='first'>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>