Aleks Sid Aleks Sid - 26 days ago 9
CSS Question

Table-cell doesn't fit its content

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

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>

Comments