2012-03-06 64 views
0

我在另一个表td标签内有一个文本和表。内表必须与外表的右上角对齐。但在我的情况下,内表对齐到右侧,而不是顶端。文字和内部表格之间存在不必要的空间。在外部表中对齐内部表td

有什么建议吗?

这里是我的代码....

<html><head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<meta http-equiv="content-style-type" content="text/css">       
<style type="text/css"> 
body{color:#000000; font-family:Arial,Tahoma,helvetica,sans-serif; font-size:9pt;} 
table{ font-family:Arial,Tahoma,helvetica,sans-serif; font-size:9pt;} 
tr{ font-family:Arila,Tahoma,helvetica,sans-serif; font-size:9pt;} 
.header{background:#D2E5FB; font-family:Arial,Tahoma,helvetica,sans-serif; color:#000000; 
    padding: 1 1 1 1; border-bottom:1px solid #AEAEAE; border-right:1px solid #AEAEAE; 
} 
.tableRow{background:#FFFFFF;border-bottom:1px solid #AEAEAE; border-right:1px solid #AEAEAE;padding:3 5 3 0;} 
.matches{font-family:Arila,Tahoma,helvetica,sans-serif; font-size:9pt;padding:8 0 8 2;}.ResultTr{} 
</style> 
<body> 
<table style="border:1px solid red;" width="100%" cellpadding="0" cellspacing="2" > 
<tr><td class = "matches" colspan=" 7"> 
<nobr> 
    <b>Number of Matching Addresses:&nbsp; 165 ,&nbsp;Page Numbers</b> 
    <style> 
     #Paginator{float:right;margin:0px;}<p> 
     #Paginator ul{ margin:0px;padding:0px;} 
     #Paginator ul li{ font-family::Arial,Tahoma,helvetica,sans-serif;font-size:9pt;list-style:none; 
     float:left;margin:2px; 
     padding:4px 8px 2px 8px;border:1px solid black; cursor:pointer; } 
     #Paginator ul li,#PrevPage{display:none;} 
    </style> 

<script> 
    var ga_pageId = new Array(); 
    function pageNavigate() 
    { 
     if(document.getElementById("FromPage")) 
     { var fromPage = parseInt(document.getElementById("FromPage").value); } 
     if(document.getElementById("ToPage")) 
     { var toPage = parseInt(document.getElementById("ToPage").value); } 
     if(fromPage == 1) 
     { document.getElementById("PrevPage").style.display="none";} 
     else 
     { document.getElementById("PrevPage").style.display="inline"; } 
     if(toPage == 4) 
      { document.getElementById("NextPage").style.display="none"; } 
     else{ document.getElementById("NextPage").style.display="inline"; } 

     for(var j=0;j<ga_pageId.length;j++) 
     { 
     if(document.getElementById(ga_pageId[j])) 
     {document.getElementById(ga_pageId[j]).style.display="none"} 
     } 

     for(var i=fromPage;i<=toPage; i++) 
     { 
     var pageId = 'PAGE_'+i; 
     if(document.getElementById(pageId)) 
     document.getElementById(pageId).style.display="inline"; } 
    } 

     function previousPage(){var fromPageEle = document.getElementById("FromPage");var toPageEle = document.getElementById("ToPage");if(fromPageEle && toPageEle){fromPageEle.value = parseInt(fromPageEle.value) - 1;toPageEle.value = parseInt(toPageEle.value) - 1;pageNavigate();}} 

     function nextPage(){var fromPageEle = document.getElementById("FromPage"); 
     var toPageEle = document.getElementById("ToPage"); 
     if(fromPageEle && toPageEle){fromPageEle.value = parseInt(fromPageEle.value) + 1;toPageEle.value = parseInt(toPageEle.value) + 1; pageNavigate();}} 

     function pageOver(lv_this){ 
     if (lv_this.selected!='X') 
     { lv_this.style.backgroundColor = "#F7F7F7"; } 
     } 

     function pageOut(lv_this) 
     { 
     if (lv_this.selected!='X') 
     { lv_this.style.backgroundColor = "#FFF"; } 
     } 
    </script> 

    <table id="Paginator" style="border:1px solid blue;"><tr><td > <input type="hidden" id="FromPage" value="1"/> 
    <input type="hidden" id="ToPage" value="4"/> <ul> 
    <li onClick="previousPage()" id="PrevPage">Prev</li><script> ga_pageId.push('PAGE_1');</script> 
    <li id="PAGE_1" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)"> 1 </li> 
    <li id="PAGE_2" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)"> 2 </li> 
    <li id="PAGE_3" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)">3</li> 
    <li id="PAGE_4" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)">4</li> 
    <li onClick="nextPage()" id="NextPage" style="display:none">Next</li> 
    </ul> 
    </td> </tr> 
    </table> 
    <script> pageNavigate()</script> 
    </nobr> 

    </td> 
</tr> 
</table> 
</body> 
</html>                 
+1

只有建议才会停止使用这样的表格。 – 2012-03-06 07:04:08

回答

1

如果使用Div标签而不是表其更好。 使用这样

<Div style="float:left;width:20%"></Div> 
<Div style="float:left;width:80%"></Div> 

写你的欲望代码的DIV中,并根据您的要求给宽度。 如果您正在设计一个包含大量内容的表单,请使用表格。

1

最快的修复可能是通过使浮到左边,通过添加style属性的b标签修改文本的样式:

<b style="float: left">Number of Matching Addresses:&nbsp; 165 ,&nbsp;Page Numbers</b> 

的原因是外部表单元格中包含这个文本和一个内部表格,并且该字母被渲染为一个块。这意味着它从一条新线开始。通过使用浮动,您可以使文本显示在内部表的左侧,如果它适合的话。

一个更好,更稳健的方法是重新设计,只使用一个表格,并且连续使用两个单元格。但是上下文可能会更复杂,因此这种简单的重写将是不可能的。