html - 配置 CSS 时出错

Question

我正在尝试使用 CSS 和容器但没有成功，我希望有人能提供帮助:

我正在尝试按照以下代码指定的方式执行操作，表没问题，它满足了主体 Container1 DIV 的 40% 的 100%，问题在于行和列，它们不遵循规范。

<div id="CamadaSuperior" >
<table id="tabela">     
   <tr>       
   <td></td>     
   <td></td>  
   <td></td>  
   <td></td>  
   <td></td>  
   <td></td>         
    </tr>
   </table>
</div> 


<div id="CamadaDoMeio" >  
CamadaDoMeio
</div>

<div id="CamadaInferior" > 

 <table class="TabelaDaCamadaInferior" border="1">
  <tr><td>Esquerda</td><td>Meio</td><td> Direita</td></tr>
  </table>
  </div>

  <div id="CamadaRodape" >

  </div>
 </body>

我的 CSS 是这样的:

html, body{  
  height: 100%;
  margin:0;
  padding:0; 
}

div{  
border:1px solid black; 
padding:0; 
}

#CamadaSuperior
{
    height: 40%;    
}
#CamadaDoMeio
{
    height: 10%;    
}
#CamadaInferior
{
    height: 40%;    
      padding:0; 
}
#CamadaRodape
{
    height: 10%;    
      padding:0; 
}

 #tabela{
     height:100%;
     table-layout: fixed;
     border-width:1px;
}

 #tabela tr{
     width:50%;
     height:100%;
     border-width:1px;
}

 #tabela tr td{
  width:100%;
   height:16.7%;
}   

 .TabelaDaCamadaInferior
    {
        height: 100%;   
        width: 100%
    }
    .TabelaDaCamadaInferior tr td 
    { 
        width:33%;
     }

但这就是表行发生的情况:

TD 标签也不起作用:

Answer 1

好吧，简短的回答是使用像 bootstrap 这样的 CSS 框架，它可以在 eclipse 环境中使用，只需附加你需要的类就可以让它正确定位。检查这里的链接 https://www.texniq.de/en/web-engineering-i/create-first-bootstrap-project

长话短说，您需要使用具有您想要的宽度和高度的类来为每个 td 和 tr 设置样式。您还需要相应地调整 font-size，以便每个单元格中的文本都能正确显示。现在该表应用了一些 css，但其中的标签正在使用它们的默认值。