# Css html table -

**URL:** <https://community.glideapps.com/t/css-html-table/36557>\
**Category:** Ask for Help\
**Created:** [January 1, 2022, 10:54am UTC](https://community.glideapps.com/t/css-html-table/36557 "2022-01-01T10:54:45Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [January 1, 2022, 10:54am UTC](https://community.glideapps.com/t/css-html-table/36557/1 "2022-01-01T10:54:45Z")

</div>

Hi,  
I am trying to get a round borders HTML table.  
For Some reason it ignores my radius setting: border-radius:9px;

```auto
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
}

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/8/d806b340ebb240acda7f62edd1651ef4ed06148f.jpeg)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 1, 2022, 3:41pm UTC](https://community.glideapps.com/t/css-html-table/36557/3 "2022-01-01T15:41:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 2, 2022, 4:27am UTC](https://community.glideapps.com/t/css-html-table/36557/4 "2022-01-02T04:27:01Z")

</div>

Best I can do is this, actually you need to make the change on the table level.

```auto
<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
}

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/2/82ce243fe36cdc32ad7afb5b9bd9e8cb112ac779.png)

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [January 2, 2022, 7:45am UTC](https://community.glideapps.com/t/css-html-table/36557/5 "2022-01-02T07:45:48Z")

</div>

Thank you,

> [@ThinhDinh](#):
>
> actually you need to make the change on the table level.

Could you explain please?

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 2, 2022, 8:46am UTC](https://community.glideapps.com/t/css-html-table/36557/6 "2022-01-02T08:46:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Prasanth\_Thoppe](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/prasanth_thoppe/32/57244_2.png) [@Prasanth\_Thoppe](https://community.glideapps.com/u/Prasanth_Thoppe)\
**Post date:** [May 6, 2023, 11:10pm UTC](https://community.glideapps.com/t/css-html-table/36557/7 "2023-05-06T23:10:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 7, 2023, 12:17am UTC](https://community.glideapps.com/t/css-html-table/36557/8 "2023-05-07T00:17:18Z")

</div>

You can use the rich text component for that.

---

<div class="post-metadata">

**Author:** ![Prasanth\_Thoppe](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/prasanth_thoppe/32/57244_2.png) [@Prasanth\_Thoppe](https://community.glideapps.com/u/Prasanth_Thoppe)\
**Post date:** [May 7, 2023, 2:00am UTC](https://community.glideapps.com/t/css-html-table/36557/9 "2023-05-07T02:00:06Z")

</div>

Thank you. This works

---

<div class="post-metadata">

**Author:** ![Prasanth\_Thoppe](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/prasanth_thoppe/32/57244_2.png) [@Prasanth\_Thoppe](https://community.glideapps.com/u/Prasanth_Thoppe)\
**Post date:** [May 7, 2023, 2:17am UTC](https://community.glideapps.com/t/css-html-table/36557/10 "2023-05-07T02:17:54Z")

</div>

I can see the table . But the css are not working. Is there anyway I can style it?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [May 7, 2023, 2:28am UTC](https://community.glideapps.com/t/css-html-table/36557/11 "2023-05-07T02:28:31Z")

</div>

You have to use inline styling.  
(unless you have a Business or Enterprise Plan, in which case you can add CSS via Settings → Appearance)

---

<div class="post-metadata">

**Author:** ![Prasanth\_Thoppe](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/prasanth_thoppe/32/57244_2.png) [@Prasanth\_Thoppe](https://community.glideapps.com/u/Prasanth_Thoppe)\
**Post date:** [May 7, 2023, 2:43am UTC](https://community.glideapps.com/t/css-html-table/36557/12 "2023-05-07T02:43:23Z")

</div>

Thank you so much . Inline works…

---

<div class="post-metadata">

**Author:** ![Gideon\_Lahav\_Busines](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gideon_lahav_busines/32/41121_2.png) [@Gideon\_Lahav\_Busines](https://community.glideapps.com/u/Gideon_Lahav_Busines)\
**Post date:** [May 7, 2023, 11:08am UTC](https://community.glideapps.com/t/css-html-table/36557/13 "2023-05-07T11:08:27Z")

</div>

נראה מדהים! אהבתי ממש

---

<div class="post-metadata">

**Author:** ![drascon](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drascon/32/20070_2.png) [@drascon](https://community.glideapps.com/u/drascon)\
**Post date:** [June 14, 2023, 3:21pm UTC](https://community.glideapps.com/t/css-html-table/36557/14 "2023-06-14T15:21:01Z")

</div>

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.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/0/70545cb1df854cf700a6b059c3672449a6f33986.png)

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:

```auto
<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??

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [June 14, 2023, 4:05pm UTC](https://community.glideapps.com/t/css-html-table/36557/15 "2023-06-14T16:05:13Z")

</div>

Try this:

```auto
<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>

```

 ![CleanShot 2023-06-15 at 00.03.58@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/c/6ccb3556aaca05a17a160986501d1863079e07ad.png)

---

<div class="post-metadata">

**Author:** ![drascon](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drascon/32/20070_2.png) [@drascon](https://community.glideapps.com/u/drascon)\
**Post date:** [June 14, 2023, 4:09pm UTC](https://community.glideapps.com/t/css-html-table/36557/16 "2023-06-14T16:09:14Z")

</div>

As always, @Darren_Murphy - you are the man, the myth and also, the legend.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/b/3be496f168a57a3ad4880907585390927a5ef900.png)

I changed the width and layout but this is EXACTLY what I needed. THANK YOU SIR!

---

<div class="post-metadata">

**Author:** ![drascon](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drascon/32/20070_2.png) [@drascon](https://community.glideapps.com/u/drascon)\
**Post date:** [June 14, 2023, 6:51pm UTC](https://community.glideapps.com/t/css-html-table/36557/17 "2023-06-14T18:51:23Z")

</div>

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:

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/d/1d5786f2ba3001431ca1b3a9709c0b548328a3ef.png)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [June 14, 2023, 7:18pm UTC](https://community.glideapps.com/t/css-html-table/36557/18 "2023-06-14T19:18:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![drascon](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drascon/32/20070_2.png) [@drascon](https://community.glideapps.com/u/drascon)\
**Post date:** [June 14, 2023, 7:21pm UTC](https://community.glideapps.com/t/css-html-table/36557/19 "2023-06-14T19:21:41Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [June 14, 2023, 7:24pm UTC](https://community.glideapps.com/t/css-html-table/36557/20 "2023-06-14T19:24:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![drascon](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drascon/32/20070_2.png) [@drascon](https://community.glideapps.com/u/drascon)\
**Post date:** [June 14, 2023, 7:29pm UTC](https://community.glideapps.com/t/css-html-table/36557/21 "2023-06-14T19:29:47Z")

</div>

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:

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/4/2416a15be59ed13eb3ec2430c6920034588f8760.png)

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!

[Next page](https://community.glideapps.com/t/css-html-table/36557.md?page=2)