Hi,
I am trying to get a round borders HTML table.
For Some reason it ignores my radius setting: border-radius:9px;
table {
width: 100%;
border-radius:9px;
height: 200px;
text-align: center;
direction:rtl;
}
th {
padding: 3px 2px;
border-left:solid white 1px;
border-right:solid white 1px;
border-top:solid white 1px;
background: url(https://jackrugile.com/images/misc/noise-diagonal.png), linear-gradient(#777, #444);
position: relative;
font-size: 15px;
font-weight: 500;
border-radius:9px;
}
td {
padding: 5px 2px;
position: relative;
font-size: 14px;
border:solid white 1px;
border-radius:6px;
}
table tr:hover td {
background-color: #ff7560 !important
}
I think it’s because you also have a padding placed on it. The border radius might be affecting the table itself and is outside of the visible borders of the table.
1 Like
Best I can do is this, actually you need to make the change on the table level.
<pre><span><style>
table {
width: 100%;
height: 200px;
text-align: center;
direction:rtl;
border-collapse: collapse;
border-radius: 9px;
overflow: hidden;
}
th {
padding: 3px 2px;
background: url(https://jackrugile.com/images/misc/noise-diagonal.png), linear-gradient(#777, #444);
position: relative;
font-size: 15px;
font-weight: 500;
border: solid white 3px;
}
td {
padding: 5px 2px;
position: relative;
font-size: 14px;
border: solid white 3px;
}
table tr:hover td {
background-color: #ff7560 !important
}
3 Likes
Thank you,
Could you explain please?
<table class="darkTable">
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:40%">cell1</td>
<td style="width:18%">cell2</td>
<td style="width:19%">cell3</td>
<td style="width22:%">cell4</td>
</tr>
</tbody>
</table>
I mean your border-radius should only be on the table level, you were using it on the header and row level as well, in your original code.
2 Likes
How do I use put the HTML table in my Glide App ? I can only see it as a Text if I use a Template column
You can use the rich text component for that.
I can see the table . But the css are not working. Is there anyway I can style it?
You have to use inline styling.
(unless you have a Business or Enterprise Plan, in which case you can add CSS via Settings → Appearance)
Thank you so much . Inline works…
1 Like
Apologies for opening this one back up but I’m pulling my hair out in frustration - I’ve been working on this for the last two days and cannot figure out what I’m doing wrong.
I need to add a bit of space in between each element to make it more pleasing to look at instead of having them touch:
<table style="width:100%; table-layout: fixed;">
<tr>
<td><div style="background-color:#132b26;padding:10px;border-radius: 10px;">
<span style="color:#21c376">
<b>PSP</b>
</div></span></td>
<td><div style="background-color:#132b26;padding:10px;border-radius: 10px;">
<span style="color:#21c376">
<b>EMT</b>
</div></span></td>
</tr>
<tr>
<td><div style="background-color:#132b26;padding:10px;border-radius: 10px;">
<span style="color:#21c376">
<b>AEMT</b>
</div></span></td>
<td><div style="background-color:#132b26;padding:10px;border-radius: 10px;">
<span style="color:#21c376">
<b>Paramedic</b><br>
</div></span></td>
</tr>
</table>
I tried following Thinh’s direction above about styling the table directly, not the individual row or the data itself, but when I remove the padding and border radius from the data all I get is flat, colored rows. Can someone smarter than me please help??
Try this:
<table style="width:10%; table-layout: auto;">
<tr>
<td style="padding:5px;">
<div style="background-color:#132b26;padding:10px;border-radius:10px;">
<span style="color:#21c376">
<b>PSP</b>
</span>
</div>
</td>
<td style="padding:5px;">
<div style="background-color:#132b26;padding:10px;border-radius: 10px;">
<span style="color:#21c376">
<b>EMT</b>
</span>
</div>
</td>
</tr>
<tr>
<td style="padding:5px;">
<div style="background-color:#132b26;padding:10px;border-radius: 10px;">
<span style="color:#21c376">
<b>AEMT</b>
</span>
</div>
</td>
<td style="padding:5px;">
<div style="background-color:#132b26;padding:10px;border-radius: 10px;">
<span style="color:#21c376">
<b>Paramedic</b>
</span>
</div>
</td>
</tr>
</table>
3 Likes
As always, @Darren_Murphy - you are the man, the myth and also, the legend.
I changed the width and layout but this is EXACTLY what I needed. THANK YOU SIR!
4 Likes
One (hopefully) last question 
I need to target all 4 TDs so that I can use a template and an ITE column to dynamically display different colors based on certification level. How and where in the code above would I do that? I’ve tried using the “id=” tag but I’m not doing it right:
I would use IF columns and a template column to dynamically build the HTML with the proper background colors applied. Rather than setting IDs, just directly set 4he background colors.
1 Like
Thanks Jeff - the problem I’m having (at least, I think it’s the problem) is that the template column isn’t identifying which data element the ITE column is supposed to change the color to. I’m directing it to PSP, EMT, AEMT and paramedic but that isn’t what the TD is called so it’s remaining blank.
Are you suggesting using one (1) template column and three (3) ITE columns?
I’m thinking 4 IF columns. One to determine the color for each cell. Then use a template column to combine the 4 colors along with the rest of the html.
That’s where I’m at currently, sort of. I’m troubleshooting it right now (obviously) but I have one (1) template column with the code that Darren so graciously cooked up for me feeding into a rich text component and one (1) ITE column just for PSP until I can work out the kinks.
I have three images already in the table that are green, red, and yellow to align with PERMITTED, NOT PERMITTED and OTHER. The ITE column looks like this:
My thought was that if I was able to name all 4 TDs I could use that logic for the dynamic color change but I know I’m doing something wrong
EDIT: OK - I think I’m on to something. I was trying to use an image but instead I created a text column and used a HEX code and it seems to be working…
EDIT AGAIN: Got it! Thank you @Darren_Murphy for the code and @Jeff_Hager for kickstarting my brain. I ended up doubling the ITE columns because I need different text colors to go with the different background colors but the issue I was having was that I was trying to get the columns to pull images. Instead, I put the color HEX code directly into the THEN element and it works like a champ! Thanks again dudes!
4 Likes
