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: How to Change Active Directory Username

$oldUsername='testUser' $newUsername='tUser' function changeUsername{ param( $oldUsername, $newUsername ) $domainName=$env:USERDNSDOMAIN $newUserPrincipleName="$newUsername@$domainName" try{ Set-ADUser $oldUsername -SamAccountName $newUsername…

PowerShell: Microsoft SQL Administration

Script to Install Microsoft Clustering Service $proxy="http://proxy:8080"$exclusionList="localhost;*.kimconnect.com"function checkProxy{try{$connectionTest=iwr download.microsoft.com#$connectionSucceeds=Test-NetConnection -Computername download.microsoft.com -Port 443 -InformationLevel Quietif…

PowerShell: How to Convert Multi-Line Texts Into an Array of Strings

Significance: we often run into situations where a list of items (such as usernames, computernames,…
Other project: DragonCoin.com