Bootstrap4 表 - 为行设置恒定高度

Question

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

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

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

下面是具有固定宽度但没有设置高度的表格的 sn-p 以及我正在尝试做的示例。

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

默认情况下，表格会增长，您需要在单元格内添加一个 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>