表セルは

Question

私はCSSと構造を持つテーブルを持ってその内容に適合しない：THEADと最初の列のテキストが25％フォントにより増加しているheadingTableによりクラスへ

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>

- 画面幅が1200ピクセルを超えるとサイズが大きくなります。
この画面の幅では、最初のセルがそのコンテンツに適合しません（「First」）。
最初の列には1桁の数字しか含まれていないため、セルの境界があふれません。
また、テーブルには約40行が含まれていることに言及しておきます。
それでは、最初のセルをそのコンテンツに合わせるために私ができることは何ですか？

Answer 1

@Dheryaが.headingTableのpaddingは、問題を解決取り外し、示唆したようにこれはあなたの問題<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

を解決します。今、あなたがオーバーフローした理由は、DOMがヘッダの幅を計算したときに、padding-left + "First" + padding-rightは、それ以下のセルの幅がpadding-left + "1" + padding-rightよりも大きいことです。だから、オーバーフローする必要があった。 （ここでは、列内の最も幅の広いセルはヘッダの幅を設定するものです）