1

我在引导表中有数据。随着行数的增加,标题将在垂直滚动时消失。所以我需要用表体垂直滚动来修复引导表的标题。此外,当页面中的列超过时,整个表格的水平滚动。

没有引导程序的参考实现。这是通过使用两个表来实现的。一个用于标题,另一个用于正文。

我有以下与我的原始数据相似的数据。

注意:我没有使用任何col-*-*fortabletd. 因为我的标题列超过 12 个。可能会增加到 15 个。所以我不使用列类。

HTML

    <tbody>
      <tr>
        <th style="cursor: pointer;">
          ABCD
        </th>
        <th style="cursor: pointer;">
          Asadh uysdsgh
        </th>
        <th style="cursor: pointer;">
          ghdsgsh sdfsdjsd
        </th>
        <th style="cursor: pointer;">
          sdagfh sdhfsjk
        </th>
        <th style="cursor: pointer;">
          sdhfasgh sdjkj
        </th>
        <th style="display: none; cursor: pointer;">
          shadfj sjdskdl
        </th>
        <th style="cursor: pointer;">
          sddgjgfhgshdf skldj
        </th>
        <th style="cursor: pointer;">
          sdfsffsd sdfsd
        </th>
        <th style="cursor: pointer;">
          sdfsd sdfsd
        </th>
        <th style="cursor: pointer;">
          fhgdd sdg sfs fsfsffsd sdfffs
        </th>
        <th style="cursor: pointer;">
          fsdfsd dvf ffff
        </th>
        <th style="cursor: pointer;">
          fsdfsd dvf ffff
        </th>
        <th style="cursor: pointer;">
          sfgasad sdfjhjshj
        </th>
        <th style="cursor: pointer;"></th>
      </tr>
      <tr>
        <td>
          579852
        </td>
        <td>
          21June_The hhjhj bhjhhkj
        </td>
        <td>
          US jhgg
        </td>
        <td>
          sdafss
        </td>
        <td>
          sdfsdfssd
        </td>
        <td style="display: none;">
          No
        </td>
        <td>
          sfdf ,sdffssd,sdfhshdj,
        </td>
        <td>
          Acsadfds
        </td>
        <td>
          06/30/2016
        </td>
        <td>
          0
        </td>
        <td>
          sfasd
        </td>
        <td>
          06/30/2016
        </td>
        <td>
          sdasd
        </td>
        <td>
          <a target="_blank" class="linkth">Preview&nbsp;</a>
        </td>
      </tr>
      <tr>
        <td>
          579850
        </td>
        <td>
          sdfff sdfabsd sjd </td>
        <td>
          US asdfd
        </td>
        <td>
          sdfsdsdsd
        </td>
        <td>
          sdfsfdfas
        </td>
        <td style="display: none;">
          No
        </td>
        <td>
          sdhafasdjfj sdhfasdsf,
        </td>
        <td>
          sdfsdsda
        </td>
        <td>
          06/30/2016
        </td>
        <td>
          0
        </td>
        <td>
          sdhafasdjfj sdhfasdsf
        </td>
        <td>
          07/04/2016
        </td>
        <td>
          sdhafasdjfj sdhfasdsf
        </td>
        <td>
          <a target="_blank" class="linkth">Preview&nbsp;</a>
        </td>
      </tr>
      <tr>
        <td>
          579893
        </td>
        <td>
          sdhafasdjfj sdhfasdsf sdfha sdfsfh
        </td>
        <td>
          US sdfsdfgl
        </td>
        <td>
          dfsjsdsd
        </td>
        <td>
          sdfdfjk
        </td>
        <td style="display: none;">
          No
        </td>
        <td>
          sdhafasdjfj sdhfasdsf
        </td>
        <td>
          sdfgagf
        </td>
        <td>
          06/30/2016
        </td>
        <td>
          0
        </td>
        <td>
          sdhafasdjfj sdhfasdsf
        </td>
        <td>
          06/28/2016
        </td>
        <td>
          sdhafasdjfj sdhfasdsf
        </td>
        <td>
          <a target="_blank" class="linkth">Preview&nbsp;</a>
        </td>
      </tr>
      <tr>
        <td>
          545554
        </td>
        <td>
          jhsdfg sdfhh sdafjh
        </td>
        <td>
          US sdfhhdf
        </td>
        <td>
          sdfadilgf
        </td>
        <td>
          tadil
        </td>
        <td style="display: none;">
          No
        </td>
        <td>
          sdhafasdjfj sdhfasdsf
        </td>
        <td>
          tadil
        </td>
        <td>
          08/08/2003
        </td>
        <td>
          0
        </td>
        <td>
          sdhafasdjfj sdhfasdsf
        </td>
        <td>
          06/29/2016
        </td>
        <td>
          sdhafasdjfj sdhfasdsf
        </td>
        <td>
          <a target="_blank" class="linkth">Preview&nbsp;</a>
        </td>
      </tr>
      <tr>
        <td>
          579892
        </td>
        <td>
          sadfs asdfhds dbsh dfsdh
        </td>
        <td>
          US tadil
        </td>
        <td>
          sddftadil
        </td>
        <td>
          fftadil
        </td>
        <td style="display: none;">
          No
        </td>
        <td>
          sdhafasdjfj sdhfasdsf
        </td>
        <td>
          Active
        </td>
        <td>
          06/30/2016
        </td>
        <td>
          0
        </td>
        <td>
          tadil fsddf
        </td>
        <td>
          06/29/2016
        </td>
        <td>
          sdhafasdjfj sdhfasdsf
        </td>
        <td>
          <a target="_blank" class="linkth">Preview&nbsp;</a>
        </td>
      </tr>
      <tr>
        <td>
          579855
        </td>
        <td>
          jsdhfsdfb dfs bsdhfdjs bsdhbh
        </td>
        <td>
          US tadil
        </td>
        <td>
          sdftadil
        </td>
        <td>
          fjtadil
        </td>
        <td style="display: none;">
          No
        </td>
        <td>
          sdhafasdjfj sdhfasdsf
        </td>
        <td>
          tadil
        </td>
        <td>
          06/30/2016
        </td>
        <td>
          0
        </td>
        <td>
        </td>
        <td>
          06/21/2016
        </td>
        <td>
        </td>
        <td>
          <a target="_blank" class="linkth">Preview&nbsp;</a>
        </td>
      </tr>
      <tr>
        <td>
          579851
        </td>
        <td>
          asdhshj- jd dsjsh jjsd
        </td>
        <td>
          US tadil
        </td>
        <td>
          tadil
        </td>
        <td>
          Retail
        </td>
        <td style="display: none;">
          No
        </td>
        <td>
          sdhafasdjfj sdhfasdsf
        </td>
        <td>
          tadil
        </td>
        <td>
          06/30/2016
        </td>
        <td>
          0
        </td>
        <td>
          sdhafasdjfj sdhfasdsf
        </td>
        <td>
          06/29/2016
        </td>
        <td>
          sdhafasdjfj sdhfasdsf
        </td>
        <td>

          <a target="_blank" class="linkth">Preview&nbsp;</a>
        </td>
      </tr>
      <tr>



        <td>
          579842
        </td>
        <td>

          Test sdhfhad bsdbh
        </td>


        <td>
          US English
        </td>
        <td>
          Internal
        </td>
        <td>
          tadil
        </td>
        <td style="display: none;">
          No
        </td>


        <td>
          sdfffa ,dsjfjs,
        </td>
        <td>
          Active
        </td>
        <td>
          06/30/2016
        </td>


        <td>
          0
        </td>
        <td>
          sdafsfsd
        </td>
        <td>
          07/01/2016
        </td>
        <td>
          asdff
        </td>
        <td>

          <a target="_blank" class="linkth">Preview&nbsp;</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Fiddle

Fiddle通过使用原始问题提供的链接。

只要看看上面的小提琴,当有更多的标题时,表格就会被扭曲。

4

0 回答 0