1

Is there a way to transform a table into a Bootstrap grid, without using CSS. I can't use jquery to rewrite the tags, because the table has another JavaScript attached with events etc.

I want to accomplish that the cell are stacked on xs-devices.

From:

<table class="table table-bordered">
    <tbody>
        <tr>
            <td>cell11</td>
            <td>cell12</td>
            <td>cell13 Lorem ipsum ... magna aliquyam</td>
            <td>cell14 Li Europan ... li existent Europan</td>
        </tr>
        ...
    </tbody>
</table>

enter image description here

To: 

<div class="col-xs-12 table-bordered gridtable">
    <div class="row">
        <div class="col-xs-6 col-md-1">cell11</div>
        <div class="col-xs-6 col-md-1">cell12</div>
        <div class="col-md-4">cell13 Lorem ipsum ... magna aliquyam</div>
        <div class="col-md-6">cell14 Li Europan ... existent Europan</div>
    </div>
    ...
</div>

enter image description here

I created a small demo http://www.bootply.com/sRZF3LfHPU

  • The upper part is the kind of table I get.

  • The lower part is the kind of look I want to archive. Reduce the width to xs-device level to see the difference.

This is not a duplicate to How to use Bootstrap 3 grid system with table component? because in that answer the cells will no stack.

Community
  • 1
  • 1
notes-jj
  • 1,437
  • 1
  • 20
  • 33
  • Your demo link gives a 404 error. Can you post some code here? That's the preferred method. – terrymorse Feb 22 '16 at 18:16
  • @terrymorse Sorry, Bootply has problems. Added snippets to question. – notes-jj Feb 22 '16 at 18:27
  • Seems like some simple javascript to traverse your table elements and create the bootstrap-equivalent elements will do the trick. Where's the hiccup? – terrymorse Feb 22 '16 at 18:36
  • @terrymorse We are using a server framework + client js framework that is creating the table and I can't influence the code generation much. If I alter the tags, the table attached events, logic etc. don't work any more. – notes-jj Feb 22 '16 at 18:41
  • I can't think of a way to generate your bootstrap elements without modifying the DOM, sorry. AFAIK, table cells will never stack. You have to use divs. – terrymorse Feb 22 '16 at 19:06

0 Answers0