我的div容器和此div內的html表之間有很大的空白空間

Question

我正在使用jquery插件數據表和DataTables.net主頁示例中使用的css demo_table.css。 問題在表的頂部，表的頂部有一個很大的空間，我使用margin和padding，但空間是相同的，當我將margin或padding的值大於零時，該空間似乎是真正的元素，因為空間比以前大。 我將生成的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;}