您的位置: 首页  >  技术问答  >  不遵守容器高度的表

不遵守容器高度的表

分类: 技术问答 • 2022-07-14 12:40:46
问题描述：

我正在打算用于PHP的HTML页面，但后来我遇到了一些高度缩放的问题。不遵守容器高度的表

我的表格以及表格中的元素没有遵守我在容器中设置的高度限制。

我不希望它超出页面，因为这将需要一个滚动条。任何人有任何建议？ （其它欢迎反馈）

代码HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>Untitled Document</title> 
<link rel="stylesheet" type="text/css" href="summonerTable.css"/> 
<link rel="stylesheet" type="text/css" href="navBar.css"/> 
</head> 
<body> 
<div class="summonerContainer"> 
    <div class="navbar"> 
    </div> 
    <div id="gameDetails"> 
    </div> 
    <table border="1" id="summonerTeams"> 
    <tr height="100%"> 
<!-- Begin Definitions !--> 
     <td> 

      <table width="100%" id="summonerTeamsDetails" height="100%"> 
      <tr height="5%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Summoner Name 
        </p> 
       </td> 
      </tr> 
      <tr height="10%"> 
       <td> 
        <table width="100%" height="100%" id="summonerTeamDetailsInterior" bgcolor="red"> 
        <tr> 
<!--      <td width="50%" background="ChampionIcon.png" id="summonerImg" alt="Hello">--> 
         <td width="25%" bgcolor="aqua"> 
          <img src="ChampionIcon.png" id="summonerImg2" alt="Hello"/> 
         </td> 
         <td width="12%"> 
          <table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="aqua"> 
          <tr> 
<!--        <td background="summonerSpell.png" id="summonerImg">--> 
           <td style="vertical-align:bottom;"> 
            <img src="summonerSpell.png" id="summonerImg" alt="Hello"/> 
           </td> 
          </tr> 
          <tr> 
<!--        <td background="summonerSpell.png" id="summonerImg"> --> 
           <td style="vertical-align:top;"> 
            <img src="summonerSpell.png" id="summonerImg" alt="Hello"/> 
           </td> 
          </tor> 
          </table> 
         </td> 
         <td width="75%"> 
          <table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="red"> 
          <tr> 
           <td bgcolor="black"> 
            <p> 
             tryndamere 
            </p> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <p> 
             K/D/A: 1000/1000/1000 
            </p> 
           </td> 
          </tr> 
          </table> 
         </td> 
        </tr> 
        </table> 
       </td> 
      </tr> 
      <tr height="10%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Champion Games 
        </p> 
       </td> 
      </tr> 
      <tr height="5%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         KDR 
        </p> 

       </td> 
      </tr> 
      <tr height="10%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Ranking 
        </p> 
       </td> 
      </tr> 
      <tr height="5%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Series 
        </p> 
       </td> 
      </tr> 
      <tr height="10%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Runes 
        </p> 
       </td> 
      </tr> 
      <tr height="10%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Masteries 
        </p> 
       </td> 
      </tr> 
      <tr height="10%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Ranked Wins 
        </p> 
       </td> 
      </tr> 
      <tr height="5%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Normal Wins 
        </p> 
       </td> 
      </tr> 
      <tr height="10%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Show Champion Counters 
        </p> 
       </td> 
      </tr> 
      </table> 
     </td> 
<!-- End Definitions !--> 
     <td> 
      <p> 
       AAAAAAAAAAAAAAAA 
      </p> 
     </td> 
     <td> 
      <p> 
       AAAAAAAAAAAAAAAA 
      </p> 
     </td> 
     <td> 
      <p> 
       AAAAAAAAAAAAAAAA 
      </p> 
     </td> 
     <td> 
      <p> 
       AAAAAAAAAAAAAAAA 
      </p> 
     </td> 
    </tr> 
    </table> 
    <div id="summonerMiddleBar"> 
    </div> 
    <table border="1" id="summonerTeams"> 
<!-- Summoner Details Table (2) !--> 
    <tr height="100%"> 
<!-- Begin Definitions !--> 
     <td> 
      <table width="100%" id="summonerTeamsDetails" height="100%"> 
      <tr height="5%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Summoner Name 
        </p> 
       </td> 
      </tr> 
      <tr height="20%"> 
       <td> 
        <table width="100%" height="100%" id="summonerTeamDetailsInterior" bgcolor="red"> 
        <tr> 
<!--      <td width="50%" background="ChampionIcon.png" id="summonerImg" alt="Hello">--> 
         <td width="25%" bgcolor="aqua"> 
          <img src="ChampionIcon.png" id="summonerImg2" alt="Hello"/> 
         </td> 
         <td width="12%"> 
          <table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="aqua"> 
          <tr> 
<!--        <td background="summonerSpell.png" id="summonerImg">--> 
           <td style="vertical-align:bottom;"> 
            <img src="summonerSpell.png" id="summonerImg" alt="Hello"/> 
           </td> 
          </tr> 
          <tr> 
<!--        <td background="summonerSpell.png" id="summonerImg"> --> 
           <td style="vertical-align:top;"> 
            <img src="summonerSpell.png" id="summonerImg" alt="Hello"/> 
           </td> 
          </tr> 
          </table> 
         </td> 
         <td width="75%"> 
          <table height="100%" width="100%" id="summonerTeamDetailsInterior" bgcolor="red"> 
          <tr> 
           <td bgcolor="black"> 
            <p> 
             tryndamere 
            </p> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <p> 
             K/D/A: 1000/1000/1000 
            </p> 
           </td> 
          </tr> 
          </table> 
         </td> 
        </tr> 
        </table> 
       </td> 
      </tr> 
      <tr height="10%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Champion Games 
        </p> 
       </td> 
      </tr> 
      <tr height="5%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         KDR 
        </p> 

       </td> 
      </tr> 
      <tr height="10%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Ranking 
        </p> 
       </td> 
      </tr> 
      <tr height="5%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Series 
        </p> 
       </td> 
      </tr> 
      <tr height="10%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Runes 
        </p> 
       </td> 
      </tr> 
      <tr height="10%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Masteries 
        </p> 
       </td> 
      </tr> 
      <tr height="10%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Ranked Wins 
        </p> 
       </td> 
      </tr> 
      <tr height="5%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Normal Wins 
        </p> 
       </td> 
      </tr> 
      <tr height="10%"> 
       <td width="100%" bgcolor="red"> 
        <p> 
         Show Champion Counters 
        </p> 
       </td> 
      </tr> 
      </table> 
     </td> 
<!-- End Definitions !--> 
     <td> 

      <p> 
       AAAAAAAAAAAAAAAA 
      </p> 
     </td> 
     <td> 
      <p> 
       AAAAAAAAAAAAAAAA 
      </p> 
     </td> 
     <td> 
      <p> 
       AAAAAAAAAAAAAAAA 
      </p> 
     </td> 
     <td> 
      <p> 
       AAAAAAAAAAAAAAAA 
      </p> 
     </td> 
    </tr> 
    </table> 
    <div class="footer"> 
    </div> 
</div> 
</body> 
</html>

CSS代码：

@charset "utf-8"; 
/* CSS Document */ 
html, body 
{ 
    height:100%; 
    width:100%; 
    font:"Courier New", Courier, monospace; 
    color:white; 
} 

.summonerContainer 
{ 
    width:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
    resize:none;  
} 
#summonerTeams 
{ 
    width:100%; 
    margin:0; 
    padding:0; 
    table-layout:fixed; 
    padding:0; 
    margin:0; 
    border-collapse:collapse; 
    height:38%; 
} 
#summonerTeamsDetails 
{ 
    padding:0; 
    margin:0; 
    border-spacing:0; 
} 
#summonerTeamDetailsInterior 
{ 
    padding:0; 
    margin:0; 
    border-spacing:0; 
    border-collapse:collapse; 

} 
#summonerMiddleBar 
{ 
    background-color:#000; 
    color:white; 
    height:5%; 
    width:100%; 
} 
#gameDetails 
{ 
    background-color:aqua; 
    color:white; 
    height:5%; 
    width:100%; 
} 
p 
{ 
    font-size:1.5vw; 
    margin:0; 
    padding:0; 
    text-align:center; 
} 
body 
{ 
    padding:0; 
    margin:0; 
} 
#summonerImg 
{ 
    max-width:100%; 
    width:100%; 
    background-size:cover; 
    /*display:block;*/ 
} 
#summonerImg2 
{ 
    max-width:100%; 
    width:100%; 
    background-size:cover; 
    /*display:block;*/ 
} 
table 
{ 
}

其他CSS代码：

@charset "utf-8"; 
/* CSS Document */ 
.navbar 
{ 
    background-color:#000; 
    color:white; 
    height:10%; 
    width:100%; 
} 
.footer 
{ 
    background-color:#000; 
    color:white; 
    height:4%; 
    width:100%; 
}

答

基本上正在发生的事情是，总会有一个指向表格单元格5％的高度对于包含在内部的文本而言太小，而不是o f消失它忽略容器的高度。

要解决这个问题，您将不得不使用媒体查询重新排列表格 - 尽管我建议不要使用表格，因为它会使这一点更容易 - 因此高度是不会创建滚动条的大小。

看到这里的教程媒体查询：http://www.youtube.com/watch?v=fA1NW-T1QXc

+0

我试过使用单独的DIVS来创建不同的部分，但是这并没有很好地工作..你有什么指针，我应该从设置CSS的媒体查询开始？ – 2014-11-02 12:21:32

+0

@JasonLy基本上我会推荐使用一个CSS表格库，它可以完成上面所说的所有功能。另一件事是为什么你想没有滚动 – Hive7 2014-11-02 12:49:41

+0

好吧，我明白了。至于为什么我不想滚动功能，这是因为该网站旨在提供简短的信息，而不必滚动。 – 2014-11-02 15:36:20

答

我认为以下几行应予以纠正：

HTML，身体{ 颜色：白色; }

设置文本颜色为白色是一个坏主意，因为文本和背景将具有相同的颜色两种，使其无法阅读一些文字（如AAAAAAAAAA），也难以让您轻易地破译错误。

为了改善标记，总是建议您将html和css代码分隔到自己的文件中。这也使得代码非常容易理解。另外，您可以随时查看Web控制台上的所有标记错误：ctrl+shif+k，适用于大多数现代浏览器。

相关推荐