Question

我正在使用jquery插件数据表和在DataTables.net主页中的示例中使用的css demo_table.css。问题摆在桌面上，桌子顶部有一个巨大的空间，我使用边距和填充，但空间是相同的，当我把边距或填充值大于零时，空间似乎是一个真实元素，因为空间比以前更大。我将把CSS代码和生成的html代码放在一起：

HTML：

<div id="table_chart_placeholder">

<div class="dataTables_wrapper" id="table_chart_wrapper"><div id="table_chart_length" class="dataTables_length"><label>Show <select name="table_chart_length" size="1"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> entries</label></div><div class="dataTables_filter" id="table_chart_filter"><label>Search: <input type="text"></label></div><div class="dataTables_scroll"><div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0pt none; width: 100%;"><div class="dataTables_scrollHeadInner" style="width: 713px;"><table class="display" style="margin-left: 0pt; width: 697px;"><thead>
    <tr><th class="sorting_asc" rowspan="1" colspan="1" style="width: 68px;">Provincias</th><th class="sorting" rowspan="1" colspan="1" style="width: 45px;">1993
            </th><th class="sorting" rowspan="1" colspan="1" style="width: 45px;">1994
            </tr>
    </thead></table></div></div><div class="dataTables_scrollBody" style="overflow: auto; width: 100%;"><table class="display" id="table_chart" style="margin-left: 0pt; width: 110%;"><thead>
    <tr style="height: 0px;"><th class="sorting_asc" rowspan="1" colspan="1" style="width: 68px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 45px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 45px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 45px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 45px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 52px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 52px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 52px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 45px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 52px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 45px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 52px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 45px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 45px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 52px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 52px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 52px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 52px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 52px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 52px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th><th class="sorting" rowspan="1" colspan="1" style="width: 52px; padding-top: 0pt; padding-bottom: 0pt; border-top-width: 0pt; border-bottom-width: 0pt; height: 0pt;"></th></tr>
    </thead>


<tbody><tr class="odd">
            <td class=" sorting_1">Artemisa</td>
            <td>1,06148</td>
             </tr><tr class="even">
            <td class=" sorting_1">Camaguey</td>
             <td>3,62712</td>
             </tr><tr class="odd">
            <td class=" sorting_1">Ciego de Avila</td>
             <td>1,19476</td>
             </tr><tr class="even">
            <td class=" sorting_1">Cienfuegos</td>
             <td>1,63268</td>
             </tr><tr class="odd">
            <td class=" sorting_1">Granma</td>
             <td>1,11384</td>
              </tr><tr class="even">
            <td class=" sorting_1">Guantanamo</td>
             <td>1,11384</td> 
             </tr><tr class="odd">
            <td class=" sorting_1">Holguin</td>
             <td>2,20292</td>
             </tr><tr class="even">
            <td class=" sorting_1">Isla de la Juventud</td>
             <td>0,53312</td>
              </tr><tr class="odd">
            <td class=" sorting_1">La Habana</td>

             <td>20,72504</td> 
             </tr><tr class="even">
            <td class=" sorting_1">Las Tunas</td>
             <td>1,22189</td> 
                </tr></tbody></table></div></div><div class="dataTables_info" id="table_chart_info">Showing 1 to 10 of 16 entries</div><div class="dataTables_paginate paging_two_button" id="table_chart_paginate"><div class="paginate_disabled_previous" title="Previous" id="table_chart_previous"></div><div class="paginate_enabled_next" title="Next" id="table_chart_next"></div></div></div>

CSS代码：

.dataTables_wrapper {
position: relative;
min-height: 302px;
clear: both;
_height: 302px;
zoom: 1;}

.dataTables_processing {
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 30px;
margin-left: -125px;
margin-top: -15px;
padding: 14px 0 2px 0;
border: 1px solid #ddd;
text-align: center;
color: #999;
font-size: 14px;
background-color: white;}

.dataTables_length {
width: 40%;
float: left;}

.dataTables_filter {
width: 50%;
float: right;
text-align: right;}

.dataTables_info {
width: 60%;
float: left;}

.dataTables_paginate {
width: 44px;
* width: 50px;
float: right;
text-align: right;}

table.display {
margin: 0 auto;
clear: both;
width: 100%;    }

table.display thead th {
padding: 3px 18px 3px 10px;
border-bottom: 1px solid black;
font-weight: bold;
cursor: pointer;
* cursor: hand;}

table.display tfoot th {
padding: 3px 18px 3px 10px;
border-top: 1px solid black;
font-weight: bold;}

table.display tr.heading2 td {
border-bottom: 1px solid #aaa;}

table.display td {
padding: 3px 10px;}

table.display td.center {
text-align: center;}

table.display tr.odd.gradeA {
background-color: #ddffdd;}

table.display tr.even.gradeA {
background-color: #eeffee;}

table.display tr.odd.gradeC {
background-color: #ddddff;}

table.display tr.even.gradeC {
background-color: #eeeeff;}

table.display tr.odd.gradeX {
background-color: #ffdddd;}

table.display tr.even.gradeX {
background-color: #ffeeee;}

table.display tr.odd.gradeU {
background-color: #ddd;}

table.display tr.even.gradeU {
background-color: #eee;}

tr.odd {
background-color: #E2E4FF;}

tr.even {
background-color: white;}

.dataTables_scroll {
  clear: both;}

.dataTables_scrollBody {
    *margin-top: -1px;}
.top, .bottom {
    padding: 15px;
background-color: #F5F5F5;
border: 1px solid #CCCCCC;}

.top .dataTables_info {
float: none;}

.clear {
clear: both;}

.dataTables_empty {
text-align: center;}

Answer 1

我刚刚完成了你的代码，桌面上没有空格。您可以使用width = 100％而不是110％。

.display{
    margin-left: 0;
    width: 110%;
}

试试吧。对于边距或填充使用float：left;在你的CSS中。

Answer 2

Datatbles会创建一个最小高度为302px的包装器，有时会导致问题，您是否尝试将其删除？

.dataTables_wrapper {
position: relative;
min-height: 302px;//remove this
clear: both;
_height: 302px;//remove this
zoom: 1;}

我的div容器和我div中的html表之间有一个很大的空白区域

2 个答案: