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: Trigger Azure AD Sync on Remote Server as a Domain Admin

# Trigger-AD-Sync.ps1# Requirements: https://blog.kimconnect.com/powershell-install-rsat/## This script does these things:# a. Obtain Domain Admin credential# b.…

Script to Push Files to Remote SFTP Server

# 1. Install WINSCP and include it in the %PATH% environmental variables# 2. Run this…

PowerShell: Get All Hyper-V Host Spectre Patch Versions

# getAllVmSpectrePatchVersions.ps1 function getHyperVHostsInForest{ function includeRSAT{ $ErrorActionPreference='stop' [Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12 #$rsatWindows7x32='https://download.microsoft.com/download/4/F/7/4F71806A-1C56-4EF2-9B4F-9870C4CFD2EE/Windows6.1-KB958830-x86-RefreshPkg.msu' $rsatWindows7x64='https://download.microsoft.com/download/4/F/7/4F71806A-1C56-4EF2-9B4F-9870C4CFD2EE/Windows6.1-KB958830-x64-RefreshPkg.msu' $rsatWindows81='https://download.microsoft.com/download/1/8/E/18EA4843-C596-4542-9236-DE46F780806E/Windows8.1-KB2693643-x64.msu' $rsat1709 =…