DataTables 停留在 html 页面的底部答案

【问题标题】：DataTables stays at the bottom of the html pageDataTables 停留在 html 页面的底部
【发布时间】：2017-05-05 11:42:44
【问题描述】：

我的 HTML 页面有一个“主”部分和一个“边栏”部分。以下是css代码：

$('#tabdat').DataTable();

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js">

<div class="sidebar" style="background-color: #e5e4d7;
        margin-right: 10px;
        margin-left: 0px;
        margin-bottom: 10px;
        margin-top: 5px;
        border-radius: 5px;
        padding:20px;
        width:200px;
        display:inline-block" ;>
  <h4>LAST 30 DAYS</h4>

  <ul>
    <li><a href="accessories.php">MOBILE HANDSETS</a></li>
    <li><a href="camera.php">CAMERA PHOTO</a></li>
  </ul>
</div>

<div class="main" style="background-color: #e5e4d7;
        margin-right: 0px;
        margin-left: 270px;
        margin-bottom: 10px;
        margin-top: 5px;
        border-radius: 5px;
        padding:20px;
        font-size: 70%;
        display:inline-block;">
  <h5 style="font-size:120%;">VANGUARD - MOBILE PHONE HANDSET</h5>
  <table id='tabdat' class="row-border" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>PARAMETER</th>
        <th>SAMPLE</th>
        <th>HOUSEHOLDS</th>
        <th>POPULATION</th>
        <th>SPENDS IN INR CR</th>
        <th>AVERAGE SPENDS IN INR</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
    </tbody>
  </table>
</div>

在我的侧边栏上，我有大约 30 个 href。表格“tabdat”正确呈现。但是，表格会被推到屏幕底部并出现在侧边栏之后。在 CSS 中，我尝试调整边距、宽度、填充，从侧边栏移除高度参数，从侧边栏移除滚动设置。但是无法将数据表放到屏幕顶部。

【问题讨论】：

即使我在 DataTables 网站上的一篇文章中读到该问题与浮点数有关....我尝试在任何一个 div 和单独使用 display:inline-block ......它将整个主 div 推到侧边栏的底部。
您需要提供一个真实的minimal reproducible example 来实际演示问题。
为什么还要投反对票？

标签： html css datatable

【解决方案1】：

玩具应该使用引号。

<div class="main">

目前你使用过：main

【讨论】：

当我在 SO 中编写此查询时出现拼写错误......原始代码有双引号......
这些引号是可选的。添加它们没有区别。
@Quentin 添加了一个可重现的示例...认为 css 就足够了。