表細胞不適合其內容

我有表CSS和結構：表細胞不適合其內容

table, td { 
 
\t border: 3px solid #208000; 
 
\t border-collapse: collapse; 
 
\t font-size: 75%; 
 
} 
 
.headingTable { 
 
\t text-align: center; \t 
 
\t padding: 1%; 
 
} 
 
@media only screen and (min-width: 768px) { 
 
    table, td { 
 
\t border: 3px solid #208000; 
 
\t font-size: 100%; 
 
    } 
 
    .headingTable { 
 
\t font-size: 100%; 
 
    } 
 
} 
 
@media only screen and (min-width: 1200px){ 
 
    table, td { 
 
     border: 5px solid #208000; 
 
    } 
 
    .headingTable { 
 
     font-size: 125%; \t 
 
    } 
 
}

<table> 
 
    <caption>Table caption</caption> 
 
    <thead> 
 
     <tr> 
 
      <td class = "headingTable">First</td> 
 
      <td class = "headingTable">Second</td> 
 
      <td class = "headingTable">Third</td> 
 
      <td class = "headingTable">Fourth</td> 
 
      <td class = "headingTable">Fifth</td> 
 
     </tr> \t 
 
    </thead> 
 
    <tbody> \t \t \t \t \t 
 
     <tr> 
 
      <td class = "headingTable">1</td> 
 
      <td>Lorem ipsum dolor </td> 
 
      <td>sit amet, consectetur adipiscing elit. In pulvinar maximus massa, id sollicitudin urna iaculis sit amet. </td> 
 
      <td>Mauris tincidunt augue erat, ac </td> 
 
      <td> accumsan justo volutpat id</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

由於類headingTable THEAD和第一列的文本增加了25％字體 - 屏幕寬度大於1200像素。
而在此屏幕寬度中，第一個單元格不適合其內容（「第一個」）。
第一列只包含一位數字，因此它們不會溢出其單元格的邊界。
另外我不得不提一下，表格中包含大約40行。
所以，問題是我能做些什麼來使第一個單元格適合其內容？

來源

2016-11-10 Aleks Sid

'padding：1％;'將其刪除並檢出 – Dherya

@Dherya，但在其他時間將不會有填充。 –

是 '.headingTable { \t text-align：left;}' – Dherya

這將解決你的問題<td><div class = "headingTable"> First</div></td>

table, td { 
 
\t border: 3px solid #208000; 
 
\t border-collapse: collapse; 
 
\t font-size: 75%; 
 
} 
 
.headingTable { 
 
\t text-align: center; \t 
 
\t padding: 1%; 
 
} 
 
@media only screen and (min-width: 768px) { 
 
    table, td { 
 
\t border: 3px solid #208000; 
 
\t font-size: 100%; 
 
    } 
 
    .headingTable { 
 
\t font-size: 100%; 
 
    } 
 
} 
 
@media only screen and (min-width: 1200px){ 
 
    table, td { 
 
     border: 5px solid #208000; 
 
    } 
 
    .headingTable { 
 
     font-size: 125%; \t 
 
    } 
 
}

<table> 
 
    <caption>Table caption</caption> 
 
    <thead> 
 
     <tr> 
 
      <td><div class = "headingTable"> First</div></td> 
 
      <td class = "headingTable">Second</td> 
 
      <td class = "headingTable">Third</td> 
 
      <td class = "headingTable">Fourth</td> 
 
      <td class = "headingTable">Fifth</td> 
 
     </tr> \t 
 
    </thead> 
 
    <tbody> \t \t \t \t \t 
 
     <tr> 
 
      <td class = "headingTable">1</td> 
 
      <td>Lorem ipsum dolor </td> 
 
      <td>sit amet, consectetur adipiscing elit. In pulvinar maximus massa, id sollicitudin urna iaculis sit amet. </td> 
 
      <td>Mauris tincidunt augue erat, ac </td> 
 
      <td> accumsan justo volutpat id</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

來源

2016-11-10 12:37:19 Dherya

謝謝！它也有效！以及你提到的'padding：0;'。 –

好，但不是100％的解決方案 - 你從「div」寬度獲得填充，但原始代碼獲取填充形式「table」width –

由於@Dherya建議，去除的.headingTablepadding解決了這個問題。現在，你有一個溢出的原因是，當DOM計算標題的寬度padding-left + "First" + padding-right時，它比下面的單元格padding-left + "1" + padding-right的寬度大。所以，它不得不溢出。（請注意，這裏列中最寬的單元格是標題寬度的設置）

來源

2016-11-10 12:46:03 Maviza101

所以，你的意思是原因是單元格下面的標題單元格中的寬度建立列？ –

是的，我喜歡。爲了證明，請使用您的初始代碼嘗試此操作：在「1」單元格中添加更多文本（例如，lorem ipsum文本）。你會發現，而不是頭，它是現在溢出的單元格。所以，這種情況和你最初的情況都是通過去掉'.headingTable'上的'padding'來解決的。 – Maviza101

你絕對是對的！我已經試過了，你所說的一切。謝謝你的解釋！ –

表細胞不適合其內容

回答

相關問題