Bootstrap4表 - 设置行的恒定高度

Question

我正在尝试创建一个具有固定列宽度和固定行高的固定列宽度的Bootstrap V4表。

单元格中的任何数据都应截断过太长（或者只是不显示，或者在可能的情况下使用text-truncate>）

我已经尝试了以前的帖子中的多件事，但似乎无法使其正常工作。

下面是桌子的片段，具有固定宽度，但没有设定的高度，也没有我要做的示例。

$('#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>

Answer 1

该表将默认情况下增长，您需要在单元格内部进行DIV，并将CSS应用于此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>