How to rotate bootstrap-table (landscape view)?

Question

I want to show my bootstrap-table by putting the columns headers on the left side and the row headers on the top. I'm getting the data from JSON. Any help? Thanks

Here is an idea of my code (JSON is hard coded just for testing the rotation of the table) :

<table id="table">
        <thead class="thead-dark" >
        <tr>
            <th data-align="center" data-sortable="true" data-field="column1">COLUMN 1</th>
            <th data-align="center" data-sortable="true" data-field="column2">COLUMN 2</th>
            <th data-align="center" data-sortable="true" data-field="column3">COLUMN 3</th>
        </tr>
        </thead>
    </table>

    <script>
  var $table = $('#table')

  $(function() {
    var data = [
      {
        'column1': 'value1',
        'column2': 'value11',
        'column3': 'value12'
      },
      {
        'column1': 'value2',
        'column2': 'value21',
        'column3': 'value22'
      },
      {
        'column1': 'value3',
        'column2': 'value31',
        'column3': 'value32'
      },
      {
        'column1': 'value4',
        'column2': 'value41',
        'column3': 'value42'
      },
      {
        'column1': 'value5',
        'column2': 'value51',
        'column3': 'value52'
      },
      {
        'column1': 'value6',
        'column2': 'value61',
        'column3': 'value62'
      }
    ]
    $table.bootstrapTable({data: data})
  })
</script>

Something like this? http://jsfiddle.net/CsgK9/2/ Answer by svinto from this question: https://stackoverflow.com/questions/6297591/how-to-invert-transpose-the-rows-and-columns-of-an-html-table — ciekals11, Aug 23 '19 at 08:54
@KamilCiekalski yes this helped me thanks but the style of the column headers is not moving with them to the left. It remains on the top — Charbel, Aug 23 '19 at 09:10
Then i think you should add to table something like `class="inverse-table"` and rewrite it's style. — ciekals11, Aug 23 '19 at 09:13
Hello, may this link help you: https://getbootstrap.com/docs/4.3/content/tables/ — Chris P, Aug 23 '19 at 10:08

score 0 · Answer 1 · answered Aug 23 '19 at 10:02

I think CSS grid would be very good and clean solution.

For example:

grid-template-areas:
      "a b c"
      "d e f"
      "g h i";

@include media-breakpoint-down(md) {
    grid-template-areas:
            "c b a"
            "f e d"
            "i h g";
  }

@media (orientation: landscape) {
     grid-template-areas:
            "i h g"
            "f e d"
            "c b a";
}

score 0 · Answer 2 · answered Aug 28 '19 at 08:14

This helped me, maybe it's useful for you as well.

<style>
  .bold {
    font-weight: bold;
  }
</style>

<table id="table"></table>

<script>
  var $table = $('#table')

  $(function() {
    var originData = [
      {
        'id': 0,
        'name': 'Item 0',
        'price': '$0',
        'title1': '1',
        'title2': '2',
        'title3': '3',
        'title4': '4',
        'title5': '5'
      }
    ]
    var data = []
        for (var key in originData[0]) {
      data.push({
        key: key,
        value: originData[0][key]
      })
    }

    $table.bootstrapTable({
      data: data,
      columns: [{
        field: 'key',
        title: 'Key',
        class: 'bold'
      }, {
        field: 'value',
        title: 'Value'
      }],
      showHeader: false
    })
  })
</script>

How to rotate bootstrap-table (landscape view)?

2 Answers2