Bootstrap4 table - 为行设置恒定高度

Question

我正在尝试创建一个 Bootstrap v4 table，它具有固定的列宽和固定的行高。

单元格中任何太长的数据都应该被截断（要么不显示，要么尽可能使用类似 text-truncate 的数据）

我尝试了以前帖子中的多种方法，但似乎无法正常工作。

下面是 table 的一个片段，它具有固定宽度但没有设置高度以及我正在尝试做的事情的示例。

$('#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/bootstrap-table@1.20.0/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/bootstrap-table@1.20.0/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

默认情况下table会增长，你需要在单元格内有一个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/bootstrap-table@1.20.0/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/bootstrap-table@1.20.0/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>

Bootstrap4 table - 为行设置恒定高度

Bootstrap4 table - set constant height for rows

html

javascript

bootstrap-table

bootstrap-4