表細胞不適合其內容

Question

我有表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行。
所以，問題是我能做些什麼來使第一個單元格適合其內容？

Answer 1

這將解決你的問題<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>

Answer 2

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