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/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>