如何在tr中對齊包含div的TD？

我有這個網頁我想做tab選'divs'。但我無法設法對齊td，'td'上的'align'屬性在樣式css上沒有工作，也沒有'text-align'屬性。誰能幫我？如何在tr中對齊包含div的TD？

HTML：

<table> 
<tr> 
<td id="principal" > 
<table> 
    <tr> 
    <td id="menu"> 
      <ul id=nav> 
    <li> 
     <a href="pesquisa.php">Pesquisas</a> 
    </li> 
    <li> 
     <a href="cad_pesquisa.php" onclick="return !window.open(this.href,  'Produtos', 'width=750,height=300')"target="_blank">Cadastrar Pesquisa</a> 
    </li> 
    <li> 
     <a href="provasdedesenvolvimento.php">Provas de Desenvolvimento</a> 
    </li> 
</ul> 
    </td> 

    <td id="meio"> 
    <table> 
     <tr> 
     <td> 
      <div id="titulo">Provas de Desenvolvimento</div> 
     </td> 
     </tr> 
     <tr> 
     <td id="esquerda"> 
      <div id="aba" class="1">Escolher Provas</div> 
     </td> 
     </tr> 
     <tr> 
     <td id="esquerda"> 
      <table class="invisivel" id="1" border="1px"> 
       <tr> 
        <td>1</td> 
       </tr> 
       <tr> 
        <td>1</td> 
       </tr> 
      </table> 
     </td> 
     </tr> 

     <tr> 
     <td> 
       <div id="aba" class="2">Processo de  Fabrica&ccedil;&atilde;o</div> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <table class="invisivel" id="2" border="1px"> 
       <tr> 
        <td>2</td> 
      </tr> 
      <tr> 
        <td>2</td> 
       </tr> 
      </table> 
     </td> 
     </tr> 

    </table> 
    </td> 

</tr> 
</table> 
</td> 
</tr> 
</table>

CSS：

body{margin:0px;padding:0px;color:black;background-color:#fff;font- family:Verdana, Geneva, sans-serif;font-size:9px;} 
      #principal{ 
       text-align:center; 
     border:1px solid #CCC; 
     margin:0 auto; 
     width:900px; 
     padding:10px; 
     margin-bottom:20px; 
     height:auto;overflow:hidden; 
     } 
      #meio{ 
       float:right; 
     margin:0 auto; 
     width:720px; 
     border:1px solid #999; 
     background-color:#F7F7F7; 
     padding:10px; 
     } 
      #titulo{ 
       border:1px solid #FC0; 
       background-color:#FFF6BF; 
       width:600px; 
       height:20px; 
       padding:5px; 
       text-align:center; 
       margin:0 auto; 
       font-size:15px 
       } 
      #aba{ 
       border:1px solid SteelBlue; 
       border-radius: 15px 15px 5px 5px; 
       background-color: LightBlue; 
       width:500px; 
       height:20px; 
       padding:5px; 
       text-align:center; 
       margin:0 auto; 
       font-size:15px 
       } 
      #esquerda{ 
       text-align: left; 
       vertical-align:middle; 
      } 
     .invisivel{ 
       display:none; 
      } 
     #menu{ 
     float:left; 
     width:150px; 
     }

https://jsfiddle.net/6whoj9xz/1/

來源

2016-07-19 Iury Piva

有問題的代碼，或沒有幫助。小提琴很好，但除非在這裏複製成本，否則我們不會去「外面」去幫忙。 –

有兩個問題： 1）你爲什麼要用表格來表示這個問題？ 2）「對齊td」是什麼意思？你能否進一步解釋，甚至可以提供一些視覺支持？ – abigwonderful

@abigwonderful我希望細胞左對齊，我使用表來解決以前的錯誤，我不能使用'div''onclick'JQuery函數。 –

你要喜歡這個

$("div").on('click', function() { 
 
\t \t \t var classe = $(this).attr("class"); 
 
\t \t $("#"+classe).show(); 
 
\t \t for(var i=0; i<4; ++i){ 
 
\t \t \t if(i!=classe){ 
 
\t \t  \t $("#"+i).hide(); 
 
\t \t  } 
 
\t \t } 
 
\t \t });

body{margin:0px;padding:0px;color:black;background-color:#fff;font- family:Verdana, Geneva, sans-serif;font-size:9px;} 
 
      #principal{ 
 
       text-align:center; 
 
     border:1px solid #CCC; 
 
     margin:0 auto; 
 
     width:900px; 
 
     padding:10px; 
 
     margin-bottom:20px; 
 
     height:auto;overflow:hidden; 
 
     } 
 
      #meio{ 
 
       float:right; 
 
     margin:0 auto; 
 
     width:720px; 
 
     border:1px solid #999; 
 
     background-color:#F7F7F7; 
 
     padding:10px; 
 
     } 
 
      #titulo{ 
 
       border:1px solid #FC0; 
 
       background-color:#FFF6BF; 
 
       width:600px; 
 
       height:20px; 
 
       padding:5px; 
 
       text-align:center; 
 
       margin:0 auto; 
 
       font-size:15px 
 
       } 
 
      #aba{ 
 
       border:1px solid SteelBlue; 
 
       border-radius: 15px 15px 5px 5px; 
 
       background-color: LightBlue; 
 
       width:500px; 
 
       height:20px; 
 
       padding:5px; 
 
       text-align:center; 
 
      
 
       font-size:15px 
 
       } 
 
      #esquerda{ 
 
       text-align: left; 
 
       vertical-align:middle; 
 
      } 
 
     .invisivel{ 
 
       display:none; 
 
      } 
 
     #menu{ 
 
     float:left; 
 
     width:150px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
<td id="principal" > 
 
<table> 
 
    <tr> 
 
    <td id="menu"> 
 
      <ul id=nav> 
 
    <li> 
 
     <a href="pesquisa.php">Pesquisas</a> 
 
    </li> 
 
    <li> 
 
     <a href="cad_pesquisa.php" onclick="return !window.open(this.href,  'Produtos', 'width=750,height=300')"target="_blank">Cadastrar Pesquisa</a> 
 
    </li> 
 
    <li> 
 
     <a href="provasdedesenvolvimento.php">Provas de Desenvolvimento</a> 
 
    </li> 
 
</ul> 
 
    </td> 
 

 
    <td id="meio"> 
 
    <table> 
 
     <tr> 
 
     <td> 
 
      <div id="titulo">Provas de Desenvolvimento</div> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td id="esquerda"> 
 
      <div id="aba" class="1">Escolher Provas</div> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td id="esquerda"> 
 
      <table class="invisivel" id="1" border="1px"> 
 
       <tr> 
 
        <td>1</td> 
 
       </tr> 
 
       <tr> 
 
        <td>1</td> 
 
       </tr> 
 
      </table> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td> 
 
       <div id="aba" class="2">Processo de  Fabrica&ccedil;&atilde;o</div> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <table class="invisivel" id="2" border="1px"> 
 
       <tr> 
 
        <td>2</td> 
 
      </tr> 
 
      <tr> 
 
        <td>2</td> 
 
       </tr> 
 
      </table> 
 
     </td> 
 
     </tr> 
 

 
    </table> 
 
    </td> 
 

 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 
</table>

來源

2016-07-19 18:09:17 ankit

非常正確！謝謝！你做了什麼？ –

只是刪除邊距：0自動;來自#aba; – ankit

如何在tr中對齊包含div的TD？

回答

相關問題