Wie richtet man TD mit einem Div in einem tr aus?

Question

Ich habe diese Seite Ich möchte Tab Likes 'Divs' tun. Aber ich kann es nicht schaffen, die td auszurichten, "Align" -Attribut auf dem "td" funktionierte nicht noch "Text-align" -Attribut auf dem Stil css. Kann mir jemand helfen?

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/

Answer 1

Sie möchten gerne dieses

$("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>