表格单元格不适合其内容

Question

我有带有 CSS 和结构的表格：

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

<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>	
    </thead>
    <tbody>					
        <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>

由于 headerTable 类，在屏幕宽度超过 1200 像素时，标题和第一列的文本会增加 25% 的字体大小。
在此屏幕宽度下，广告中的第一个单元格不适合其内容（“第一个”）。
第一列仅包含一位数字，因此它们不会溢出单元格的边界。
另外我必须提到该表包含大约 40 行。
那么，问题是我可以做些什么来使广告中的第一个单元格适合其内容？

Answer 1

这将解决您的问题<td><div class = "headingTable"> First</div></td>

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

<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>	
    </thead>
    <tbody>					
        <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 建议的那样，删除.headingTable 的padding 可以解决问题。现在，出现溢出的原因是当 DOM 计算标题 padding-left + "First" + padding-right 的宽度时，它大于下面单元格 padding-left + "1" + padding-right 的宽度。所以，它必须溢出。 （请注意，此处列中最宽的单元格设置了标题的宽度。）