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>

由于类为headingTable，在屏幕宽度大于1200px时，thead和第一列的文本增加了25％的字体大小。
在此屏幕宽度下，thead中的第一个单元格不符合其内容（“First”）第一列仅包含一位数字，因此它们不会溢出其单元格的边界另外我要提到的是，该表包含大约40行那么，问题是我能做些什么来使thead中的第一个单元符合其内容？

Answer 1

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

＆＃13;

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%;	
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

正如@Dherya建议的那样，删除padding .headingTable可以解决问题。现在，您遇到溢出的原因是，当DOM计算标题padding-left + "First" + padding-right的宽度时，它大于下面单元格padding-left + "1" + padding-right的宽度。所以，它必须溢出。（请注意，此处列中最宽的单元格用于设置标题的宽度。）

表格单元格不适合其内容

2 个答案: