表细胞不适合其内容

问题描述：

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行。
所以，问题是我能做些什么来使第一个单元格适合其内容？

'padding：1％;'将其删除并检出 – Dherya

@Dherya，但在其他时间将不会有填充。 –

是 '.headingTable { \t text-align：left;}' – Dherya

答

这将解决你的问题<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>

谢谢！它也有效！以及你提到的'padding：0;'。 –

好，但不是100％的解决方案 - 你从“div”宽度获得填充，但原始代码获取填充形式“table”width –

答

由于@Dherya建议，去除的.headingTablepadding解决了这个问题。现在，你有一个溢出的原因是，当DOM计算标题的宽度padding-left + "First" + padding-right时，它比下面的单元格padding-left + "1" + padding-right的宽度大。所以，它不得不溢出。（请注意，这里列中最宽的单元格是标题宽度的设置）

所以，你的意思是原因是单元格下面的标题单元格中的宽度建立列？ –

是的，我喜欢。为了证明，请使用您的初始代码尝试此操作：在“1”单元格中添加更多文本（例如，lorem ipsum文本）。你会发现，而不是头，它是现在溢出的单元格。所以，这种情况和你最初的情况都是通过去掉'.headingTable'上的'padding'来解决的。 – Maviza101

你绝对是对的！我已经试过了，你所说的一切。谢谢你的解释！ –

表细胞不适合其内容

相关推荐