Sign up to Knack for Free - Affiliate Link
In this video, I share my recent experience working with a client who needed to make an important Alert Notes table stand out. Although I'm not a coder, I managed to customise a table using ChatGPT and some basic CSS, and I want to show you how I did it!
We'll go through the steps of changing a table's appearance to make it more noticeable, including changing the colour, border thickness, and font size. I'll demonstrate how to tweak CSS settings in your application to achieve similar results.
Update Title
<p style="color:#cf2474;font-size:20px"><strong><span style="color:#ff0000">Clients Table</span></strong></p>
Add to CSS
/* Change table outline and grid color to red */
#view_4 > div.kn-table-wrapper > table {
border: 2px solid red; /* Outline color */
border-collapse: collapse; /* Ensures no space between borders */
}
#view_4 > div.kn-table-wrapper > table th,
#view_4 > div.kn-table-wrapper > table td {
border: 1px solid red; /* Grid color */
}
Comments