Question

我可以使用jquery水平制表符而不是垂直制表符来正确显示jquery数据表。当我将其设置为垂直时，数据表显示在选项卡下方，而不是显示在右侧。

我使用chrome开发人员工具仔细查看了元素，我看到了如下的层次结构：

<div id="homeContent">
<h2>Announcements</h2>
<form id="homeForm" class="cleanform" action="/VideoDataService/tabs/homeTab" method="post>
<div class="header"></div>
<div class="header"> == $0
<div id="announcementTbl_wrapper" class="dataTables_wrapper no-footer">...

我不知道为什么有两个div class =“header”行，但是如果我鼠标悬停在外面的那一行上它会显示它占用0个垂直空间，所以我认为这不是问题。

如果我将鼠标移到内部，它会显示一个包含表格的大蓝色空间，并一直延伸到页面顶部。所以似乎div是罪魁祸首，在桌子上面增加了很多空间。

如何摆脱所有额外空间？我试过了

div.header {
margin-top: -500px;
padding: 0px;
border:0px;
}

但它没有做任何事。我也尝试过：

#homeContent {
margin-left: 230px;
margin-top: -500px;
}

但它也没有做任何事情。我也尝试将margin-top设置为0，将border和padding设置为0.还试过float：top;没有任何效果。

我还使用https://jqueryui.com/tabs/#vertical作为指南进行了以下设置：

.ui-tabs.ui-tabs-vertical {
    width: 1500px;
} 

.ui-tabs.ui-tabs-vertical .ui-widget-header {
    background:white;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
    float: left;
    width: 200px;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
    font-size:65%;
    clear: left;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
    display: block;
}

.ui-tabs-panel {
    float right;
    width:1200px;
}

还尝试将显示更改为内联和内联块。没有任何效果。有什么建议吗？

jquery表在jquery垂直制表符

0 个答案: