Posted On April 5, 2019

WordPress Custom CSS for Tables

kimconnect 0 comments
blog.KimConnect.com >> Codes >> WordPress Custom CSS for Tables

WordPress themes can be customized, and one of the common practice is to add CSS to control the layout of certain elements such as tables. Here’s an example on how to add a table column class to control its width, making it fit the contents so there’s no stretching.

Click on Appearance > Customize > Additional CSS > insert this > Publish

td.fitwidth {
width: 1px;
white-space: nowrap;
}

Apply this ‘fitwidth’ class toward any column as illustrated below:

<table style="width: 100%;">
<tbody>
<tr>
<td class="fitwidth"><a href="https://blog.kimconnect.com/wp-content/uploads/2019/04/BA_MIS.jpg"><img class="alignnone size-thumbnail wp-image-1498" src="https://blog.kimconnect.com/wp-content/uploads/2019/04/BA_MIS-150x150.jpg" alt="" width="150" height="150" /></a></td>
<td class="fitwidth"><a href="https://blog.kimconnect.com/wp-content/uploads/2019/04/MCSE.jpg"><img class="alignnone size-thumbnail wp-image-1499" src="https://blog.kimconnect.com/wp-content/uploads/2019/04/MCSE-150x150.jpg" alt="" width="150" height="150" /></a></td>
<td class="fitwidth"><a href="https://blog.kimconnect.com/wp-content/uploads/2019/04/MCDBA.jpg"><img class="alignnone size-thumbnail wp-image-1497" src="https://blog.kimconnect.com/wp-content/uploads/2019/04/MCDBA-150x150.jpg" alt="" width="150" height="150" /></a></td>
</tr>
<tr>
<td class="fitwidth"><a href="https://blog.kimconnect.com/wp-content/uploads/2019/04/CCNP.jpg"><img class="alignnone size-thumbnail wp-image-1491" src="https://blog.kimconnect.com/wp-content/uploads/2019/04/CCNP-150x150.jpg" alt="" width="150" height="150" /></a></td>
<td class="fitwidth"><a href="https://blog.kimconnect.com/wp-content/uploads/2019/04/CompTIA_Security_Plus.jpg"><img class="alignnone size-thumbnail wp-image-1493" src="https://blog.kimconnect.com/wp-content/uploads/2019/04/CompTIA_Security_Plus-150x150.jpg" alt="" width="150" height="150" /></a></td>
<td class="fitwidth"><a href="https://blog.kimconnect.com/wp-content/uploads/2019/04/CompTIA_Linux_Plus.jpg"><img class="alignnone size-thumbnail wp-image-1494" src="https://blog.kimconnect.com/wp-content/uploads/2019/04/CompTIA_Linux_Plus-150x150.jpg" alt="" width="150" height="150" /></a></td>
</tr>
<tr>
<td class="fitwidth"><a href="https://blog.kimconnect.com/wp-content/uploads/2019/04/Microsoft_Office_Specialist_Certification.jpg"><img class="alignnone size-thumbnail wp-image-1492" src="https://blog.kimconnect.com/wp-content/uploads/2019/04/Microsoft_Office_Specialist_Certification-150x150.jpg" alt="" width="150" height="150" /></a></td>
<td class="fitwidth"><a href="https://blog.kimconnect.com/wp-content/uploads/2019/04/Sales_Counselor_Certificate.jpg"><img class="alignnone size-thumbnail wp-image-1496" src="https://blog.kimconnect.com/wp-content/uploads/2019/04/Sales_Counselor_Certificate-150x150.jpg" alt="" width="150" height="150" /></a></td>
<td class="fitwidth"><a href="https://blog.kimconnect.com/wp-content/uploads/2019/04/Kofax_7_Certfication.jpg"><img class="alignnone size-thumbnail wp-image-1495" src="https://blog.kimconnect.com/wp-content/uploads/2019/04/Kofax_7_Certfication-150x150.jpg" alt="" width="150" height="150" /></a></td>
</tr>
</tbody>
</table>
<p> </p>

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Post

IIS Error Code 0x80070021

Error Message: Detailed Error Information:Module IIS Web CoreNotification BeginRequestHandler Not yet determinedError Code 0x80070021Config Error…

Script to Rename Computers in Active Directory

1. Run this PowerShell Script to rename 1 computer: $admin = "KIMCONNECT\"+ Read-Host "Enter the…

WinRM and Trusted Hosts for Non-Domain Computers

Error: [TESTWINDOWS] Connecting to remote server TESTWINDOWS failed with the following error message : Access…