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

PowerShell: Set ACL

# setAcl-v0.01.ps1# # What this script does:# 1. Set permissions on a set of "destination…

How to Import Files Into a Docker Container

1. Use SCP to copy files to the remote server while logged onto the local…

PowerShell: Auto Login to WordPress and Update Gold Prices WooCommerce Plugin

# API URI - these are examples, only $goldPriceApi='https://dragoncoin.com/XAU/USD' $silverPriceApi='https://dragoncoin.com/XAG/USD' $platinumApi='https://dragoncoin.com/XPT/USD' $palladiumApi='https://dragoncoin.com/XPD/USD' # Wordpress WooCommerce…