'Bootstrap4 table - set constant height for rows

I am trying to create a Bootstrap v4 table which has both a fixed column width and a fixed row height.

Any data within the cells which is too long should be truncated (either just not shown or if possible use something like text-truncate)

I have tried multiple things from previous posts but cannot seem to get it working.

Below is a snippet of the table with a fixed width but without the set height and an example of what it is I am trying to do.

enter image description here 

$('#table').bootstrapTable({
  data: [{
      1: '1',
      2: '2',
      3: '3',
      4: '4',
      5: '5'
    },

    {
      1: '6',
      2: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
      3: '8',
      4: '9',
      5: '10'
    }

  ]
})
.set-width {
  min-width: 300px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/spacelab/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>

<div class="table-responsive">
  <table id="table" class="table table-striped" data-detail-view="true">
    <thead>
      <tr>
        <th class="set-width" data-field="1" style="min-width: 500px;">
          Heading 1
        </th>
        <th class="set-width" data-field="2" style="min-width: 500px;">
          Heading 2
        </th>
        <th class="set-width" data-field="3" style="min-width: 500px">
          Heading 3
        </th>
        <th class="set-width" data-field="4" style="min-width: 500px;">
          Heading 4
        </th>
        <th class="set-width" data-field="5" style="min-width: 500px;">
          Heading 5
        </th>
      </tr>
    </thead>
  </table>
</div>
javascripthtmlbootstrap-4bootstrap-table


Solution 1:[1]

The table will grow by default, you need a div inside the cell, and apply the CSS to this div.

$('#table').bootstrapTable({
data: [{
1: '1',
2: '2',
3: '3',
4: '4',
5: '5'
},

{
1: '6',
2: '<div class="set-height">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>',
3: '8',
4: '9',
5: '10'
}

]
})
.set-width {
min-width: 300px;
}
.set-height {
max-height: 30px;
overflow: hidden;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/spacelab/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>

<div class="table-responsive">
<table id="table" class="table table-striped" data-detail-view="true">
    <thead>
    <tr>
        <th class="set-width" data-field="1" style="min-width: 500px;">
            Heading 1
        </th>
        <th class="set-width" data-field="2" style="min-width: 500px;">
            Heading 2
        </th>
        <th class="set-width" data-field="3" style="min-width: 500px">
            Heading 3
        </th>
        <th class="set-width" data-field="4" style="min-width: 500px;">
            Heading 4
        </th>
        <th class="set-width" data-field="5" style="min-width: 500px;">
            Heading 5
        </th>
    </tr>
    </thead>
</table>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alex Angelico

Related Questions