Question

我正在使用数据表的Scroller扩展名。

当表格有超过1行时，行显示正常。但是如果表只包含1行，那么＆＃34;下部＆＃34;该行没有显示。桌子几乎排在中间。

我尝试在行中使用div制作第二行，如我在示例中所示。如果有超过1行，表可以计算出将其包含在高度计算中，但如果只有1行则不然。有谁知道我能做些什么呢？

我应该关注焦点：<div>second line</div>

HTML：

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

  <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
  <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

  <script src="http://datatables.net/release-datatables/media/js/jquery.js"></script>
  <script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
  <script src="http://datatables.net/release-datatables/extensions/Scroller/js/dataTables.scroller.js"></script>

  <meta charset=utf-8 />
  <title>DataTables - JS Bin</title>
</head>
<body>
  <div class="container">
    <table id="example" class="display nowrap" width="100%">
      <thead>
        <tr>
          <th>Name</th>

        </tr>
      </thead>

      <tbody>
        <tr>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

使用Javascript：

$(document).ready( function () {
  var table = $('#example').DataTable({
            deferRender: false, // TODO learn from doc
            dom: 'f<"table-toolbar">tS',
            language: {
                "search": '<i class="fa fa-search"></i>'
            },
            stateSave: false,
            //scrollY: $(document).height() - 266,
            scrollY: true,
            scrollCollapse: true,
            columns: [
                {
                    "className": '',
                    "orderable": false,
                    "sortable": false,
                    "data": null,
                    "defaultContent": "first line<div>second line</div>"
                }
            ]
        });
} );

更新1：小提琴中断

Fiddle where the rows dowsn't work

更新2：小提琴在哪里工作。（2行而不是1行 - 别的！）

Fiddle where the rows works

Answer 1

显示问题是由导致数据被截断的周围div（.dataTables_scrollBody）引起的。一行表为37px，两行为112px。 37px显然是不够的，所以作为一种解决方法，你可以将.dataTables_scrollBody {min-height:55px}放在CSS中。这将解决显示问题。见http://live.datatables.net/ceqijesi/12/edit

然而，要解决实际问题，您应该深入研究创建表的JavaScript。或者，更准确地说，是桌子后面的div。它没有类，只有一个定义其高度的样式属性。（表本身绝对定位，因此下一个div确定.dataTables_scrollBody的高度。）
为了混淆问题，这个div在不同的浏览器中有不同的高度。

Answer 2

也可以通过以下方式完成：

text-overflow: ellipsis; 
white-space: nowrap;

请参阅Datatables doc

当表

2 个答案: