不遵守容器高度的表

我正在打算用於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%; 
}

來源

2014-11-02 Jason Ly

基本上正在發生的事情是，總會有一個指向表格單元格5％的高度對於包含在內部的文本而言太小，而不是o f消失它忽略容器的高度。

要解決這個問題，您將不得不使用媒體查詢重新排列表格 - 儘管我建議不要使用表格，因爲它會使這一點更容易 - 因此高度是不會創建滾動條的大小。

看到這裏的教程媒體查詢：http://www.youtube.com/watch?v=fA1NW-T1QXc

來源

2014-11-02 10:54:09 Hive7

我試過使用單獨的DIVS來創建不同的部分，但是這並沒有很好地工作..你有什麼指針，我應該從設置CSS的媒體查詢開始？ – 2014-11-02 12:21:32

@JasonLy基本上我會推薦使用一個CSS表格庫，它可以完成上面所說的所有功能。另一件事是爲什麼你想沒有滾動 – Hive7 2014-11-02 12:49:41

好吧，我明白了。至於爲什麼我不想滾動功能，這是因爲該網站旨在提供簡短的信息，而不必滾動。 – 2014-11-02 15:36:20

我認爲以下幾行應予以糾正：

HTML，身體{ 顏色：白色; }

設置文本顏色爲白色是一個壞主意，因爲文本和背景將具有相同的顏色兩種，使其無法閱讀一些文字（如AAAAAAAAAA），也難以讓您輕易地破譯錯誤。

爲了改善標記，總是建議您將html和css代碼分隔到自己的文件中。這也使得代碼非常容易理解。另外，您可以隨時查看Web控制檯上的所有標記錯誤：ctrl+shif+k，適用於大多數現代瀏覽器。

來源

2014-11-02 10:59:13

不遵守容器高度的表

回答

相關問題