html - 如何卡住表列

Question

如何使水平滚动条只影响下图中的灰色列。

html,
body {
  background: #ccc;
  font-family: Arial, sans-serif
}

#table {
  background: white;
  margin: 100px auto;
  width: 400px;
  overflow: auto;
  text-align: center;
}

#inner-table {
  border-collapse: collapse;
  border-radius: 3px;
  overflow: hidden
}

td,
th {
  padding: 5px 10px;
}

th {
  border-bottom: 1px solid #B8C2CC
}

.sticky {
  background-color: #1C3D5A;
  color: #dae1e7;
}

.scroll {
  background-color: #B8C2CC;
  color: #22292f
}

<div id="table">
  <table id="inner-table">
    <thead>
      <tr>
        <th class="sticky">sticky</th>
        <th class="sticky">sticky</th>
        <th class="scroll">scroll</th>
        <th class="scroll">scroll</th>
        <th class="scroll">scroll</th>
        <th class="scroll">scroll</th>
        <th class="scroll">scroll</th>
        <th class="scroll">scroll</th>
        <th class="sticky">sticky</th>
        <th class="sticky">sticky</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky">1</td>
        <td class="sticky">2</td>
        <td class="scroll">3</td>
        <td class="scroll">4</td>
        <td class="scroll">5</td>
        <td class="scroll">6</td>
        <td class="scroll">7</td>
        <td class="scroll">8</td>
        <td class="sticky">9</td>
        <td class="sticky">10</td>
      </tr>

      <tr>
        <td class="sticky">11</td>
        <td class="sticky">12</td>
        <td class="scroll">13</td>
        <td class="scroll">14</td>
        <td class="scroll">15</td>
        <td class="scroll">16</td>
        <td class="scroll">17</td>
        <td class="scroll">18</td>
        <td class="sticky">19</td>
        <td class="sticky">20</td>
      </tr>

    </tbody>
  </table>
</div>

Answer 1

这比我预期的要难得多 - 即使是现在，我也在想是否有更简单的方法。

下面的方法使用:

• 一个包含两个position: absolute 表的外部容器
• 固定宽度的内部容器 - 使用边距在外部容器内定位 - 带有滚动条，可让您看到其中包含的超大表格

工作示例:

html,
body {
  background: #ccc;
  font-family: Arial, sans-serif
}

.outer-container {
  position: relative;
  background-color: white;
  margin: 40px auto;
  width: 400px;
  overflow: hidden;
  text-align: center;
}

.outer-container,
.inner-container {
height: 125px;
}

table {
height: 108px;
}

.inner-container table {
  border-radius: 3px;
}

td, th {
  padding: 5px 10px;
}

th {
  border-bottom: 1px solid #B8C2CC
}

.fixed-table th,
.fixed-table td {
  background-color: #1C3D5A;
  color: #dae1e7;
}

.inner-container {
margin: 0 130px;
max-width: 612px;
overflow: auto;
}

.inner-container > table {
  background-color: #B8C2CC;
  color: #22292f
}

.outer-container > table {
position: absolute;
top: 0;
border-collapse: collapse;
}

.outer-container > table:nth-of-type(1) {
left: 0;
}

.outer-container > table:nth-of-type(2) {
right: 0;
}

<div class="outer-container">

  <table class="fixed-table">
    <thead>
      <tr>
        <th>sticky</th>
        <th>sticky</th>
      </tr>
    </thead>
    
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>11</td>
        <td>12</td>
      </tr>
    </tbody>
  </table>
  
  <div class="inner-container">
    <table>
      <thead>
        <tr>
          <th>scroll</th>
          <th>scroll</th>
          <th>scroll</th>
          <th>scroll</th>
          <th>scroll</th>
          <th>scroll</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
        </tr>

        <tr>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
          <td>17</td>
          <td>18</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <table class="fixed-table">
    <thead>
      <tr>
        <th>sticky</th>
        <th>sticky</th>
      </tr>
    </thead>
    
    <tbody>
      <tr>
        <td>9</td>
        <td>10</td>
      </tr>
      <tr>
        <td>19</td>
        <td>20</td>
      </tr>
    </tbody>
  </table>
</div>