Table-cell doesn't fit its content - css

Question

I have table with CSS and structure:
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>
Due to class headingTable the text of thead and first column are increased by 25% font-size at screen width wider than 1200px.
And at this screen width the first cell in thead doesn't fit to it's content ("First").
First column includes only one-digit numbers, therefore they don't overflow borders of their cells.
Also I have to mention that table contains about 40 rows.
So, the question is what I can do to make first cell in thead fit its content?

Answer 1

This will solve your problem <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

As #Dherya suggested, removing the padding of .headingTable solves the problem. Now, the reason why you had an overflow was that when the DOM calculated the width of the header padding-left + "First" + padding-right, it was more than the width of the cell padding-left + "1" + padding-right below. So, it had to overflow. (Note that here the widest cell in a column is what sets the width of the header.)