Search code examples
javascripttwitter-bootstrapbootstrap-table

Rowspan with Bootstrap-table-fixed-columns extension


I have a problem with the fixed-columns extension of Bootstrap-Table. I'm trying to use a rowspan attribute to have a "3-rows-high" fixed column on the left, followed by a fixed column of 3 rows, but it seems that it doesn't work :

https://jsfiddle.net/Lx87aetc/4/

The goal is to do something with the following architecture :

<table>
  <thead>
    <tr>
      <th></th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3"></td>
      ...
    </tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

Does anyone have an idea to solve my problem ?

Thank you, Ed


Solution

  • The solution simply didn't exist, it was a bug, split into 2 bugs :

    Firstly, Bootstrap-Table didn't handle correctly the rowspan / colspan management (some '-' are appended at the end of the rows). Wenzhixin has corrected this: https://github.com/wenzhixin/bootstrap-table/commit/468169cde5bdbf2178a9299d288622fe93777aaa

    Secondly, the fixed-column extension didn't handly correctly this either, which lead to a "double" bug (some '-' + buggy fixed columns): I corrected the extension bug : https://github.com/wenzhixin/bootstrap-table-fixed-columns/pull/12

    Now it's working : https://jsfiddle.net/wenyi/3v7h5erL/3/

    It's solving simple situations like this one :

    <table data-toggle="table" data-fixed-columns="true" data-fixed-number="3">
      <thead>
        <tr>
          <th>Title</th>
          <th>1</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2">Momentum</td>
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>