表细胞不适合其内容

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的宽度大。所以，它不得不溢出。 （请注意，这里列中最宽的单元格是标题宽度的设置）