如何在tr中对齐包含div的TD？

Question

我有这个页面我想做标签喜欢＆＃39; divs＆＃39;。但我无法调整td，＆＃39; align＆＃39;关于“td＆＃39;没有工作也没有＆＃39; text-align＆＃39;风格css的属性。任何人都可以帮助我吗？

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

你想要喜欢这个

＆＃13;

＆＃13;

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

＆＃13;

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;
        }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;