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: Get-NetTCPConnection for Windows 7 & 2008

On Windows 8 & 2012, there's this nifty function named Get-NetTCPConnection that is useful to…

PowerShell: Reset Active Directory User Password

# User input variables $adminUsername='intranet\kim-a' $adminPassword='SOMECOMPLEXPASSWORD' $userId='kim' $newPassword='SOMECOMPLEXPASSWORD' $domainController='intranet.kimconnect.com' # Auto-gen Variables $encryptedPassword=ConvertTo-SecureString $adminPassword -AsPlainText…

PowerShell: Search File Contents Matching a Phrase or String

$searchDirectories='C:\users\Public\.jenkins\jobs' $searchDepth=1 $fileNameScope='*.xml' $searchString='kimconnect' # Select the files and perform the search in each file…