Question

我在另一个表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>

Answer 1

如果你使用Div标签而不是表格，它会更好。像这样使用

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

在div中写下你想要的代码，并根据你的要求给出宽度。如果您正在设计一个包含大量内容的表单，请使用表。

Answer 2

最快的修复方法可能是通过向style标记添加b属性，使其向左浮动来修改文本的样式：

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

原因是外部表格单元格包含此文本和内部表格，并且字母呈现为块。这意味着它从一个新行开始。通过使用浮动，如果文本适合那里，则使文本显示在内部表的左侧。

更好，更强大的方法是重新设计，只使用一个表连续两个单元格。但是上下文可能更复杂，因此不可能进行如此简单的重写。

对齐外表td中的内表

2 个答案: