Table-单元格不适合它的内容

Question

我有 table 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>

由于 class headingTable，thead 和第一列的文本在屏幕宽度超过 1200px 时字体大小增加了 25%。
在这个屏幕宽度下，thead 中的第一个单元格不适合它的内容 ("First")。
第一列仅包含一个数字，因此它们不会溢出其单元格的边界。
另外我不得不提到 table 包含大约 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 计算 header padding-left + "First" + padding-right 的宽度时，它大于下面单元格 padding-left + "1" + padding-right 的宽度。所以，它不得不溢出。（请注意，此处列中最宽的单元格设置 header 的宽度。）

Table-单元格不适合它的内容

Table-cell doesn't fit its content

css

css-tables