# Custom CSS for data table **URL:** \ **Category:** Ask for Help\ **Created:** [December 12, 2023, 9:09pm UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636 "2023-12-12T21:09:49Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [December 12, 2023, 9:09pm UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/1 "2023-12-12T21:09:49Z")
Hi, Could anyone help me with some Custom CSS that would make the table row a little taller? ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/e/5eece54074ff2489395f456f7eeff9c3497195a6.png) Also, is it possible to create group by a column? I am trying to make it look a bit like this ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/5/058e095aaccfb8eb53891c5da67a851f6f06e8a4.jpeg) The grouping is the category column ---
**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:** [December 13, 2023, 2:26am UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/2 "2023-12-13T02:26:47Z")
The only way to get that would be to use a HTML table with inline styling, in a Rich Text component. ---
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [December 13, 2023, 5:09am UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/3 "2023-12-13T05:09:27Z")
ok great thanks. Would that be for making the row taller as well as the grouping or just making the row taller? Thanks ---
**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:** [December 13, 2023, 5:22am UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/4 "2023-12-13T05:22:26Z")
It’s a HTML table. You can do whatever you want with it. ---
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [December 13, 2023, 8:16am UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/5 "2023-12-13T08:16:24Z")
If I was to find someone who could help me create the HTML table and inline styling, do you know if the fields can still allow for inline editing on the table? ---
**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:** [December 13, 2023, 8:18am UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/6 "2023-12-13T08:18:53Z")
No, that’s the downside of using a HTML table. You lose the ability to select/edit individual rows. Because it’s displayed in a rich text component, the best you can do is assign an action to the table as a whole. ---
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [December 13, 2023, 8:24am UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/7 "2023-12-13T08:24:22Z")
ok thanks. Perhaps I will create a button that can switch between the native glide table for editing and the html table which I only want for PDF creation purposes and I was planning on trying the Urlbox integration, unless you can suggest another way. On the HTML table, i found you post about creating a custom table. [⚡ Rich Text \> Actions! - #12 by Darren\_Murphy](https://community.glideapps.com/t/rich-text-actions/27273/12) presuably I could try following similar steps? ---
**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\ **Post date:** [December 13, 2023, 8:26am UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/8 "2023-12-13T08:26:33Z")
You can display a PDF instead HTML… i do that for my Invoices ---
**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:** [December 13, 2023, 8:43am UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/9 "2023-12-13T08:43:19Z")
> [@Si\_Gal](#): > > On the HTML table, i found you post about creating a custom table. [⚡ Rich Text \> Actions! - #12 by Darren\_Murphy](https://community.glideapps.com/t/rich-text-actions/27273/12) presuably I could try following similar steps? Yes. I also created a video tutorial that shows how to set that up. It’s quite old, but the essential concepts remain the same. The only caveat is that unless you have a Business Plan or better, then all of your table styling (CSS) needs to be applied inline. That is, adding CSS to a rich text component is no longer supported. > [@How To: CSS Table with dynamic filtering and sorting](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784): > > I’ve been asked a few questions about this one, so here is a tutorial that walks through the process step by step. The app I’m working on in the tutorial is copyable, so feel free to make your own copy (see link below). enjoy slight_smile Links: [divtable.com table styler](https://divtable.com/table-styler/) Experimental code to sort joined list by secondary joined list – [Link to use in External Code column](https://mcdarren.github.io/glide-jl-sort-by-keys-advanced/) – [Clone link](https://github.com/mcdarren/glide-jl-sort-by-keys-advanced)[Copyable Demo App](https://html-tables-concept.glideapp.io/) Note that the experimental code column is removed from… ---
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [December 13, 2023, 10:34am UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/10 "2023-12-13T10:34:54Z")
Thanks, this is great. I will give it a go. Just thinking about what @Uzo said above. Is there away to create a repeating container in Glide. If so then I could create a page like this from this ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/6/060742d665bafdaa735b90b7d7bb6243a5d7a773.png) from this table ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/d/3d0e8295406bebfe23d80c9bab05f5f03f692fd3.png) and use Urlbox to create the PDF and display it rather than having to create custom CSS table ---
**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:** [December 13, 2023, 11:43am UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/11 "2023-12-13T11:43:00Z")
Try using a Custom Collection. ---
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [December 13, 2023, 12:13pm UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/13 "2023-12-13T12:13:55Z")
Fantastic! Thank you ---
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [December 13, 2023, 5:31pm UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/14 "2023-12-13T17:31:42Z")
Hi Darren, I’ve given this a go and I have just about got it working, aside from the fact that the CSS isn’t styling my table. I am missing something? This how my table looks with the CSS applied, just the same as without it. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/f/5f6c9afc09d56e53197f2e104aba1e6bbbe48e1a.png) and this is my Table HTML: ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/b/5bfadc6c354d3f85258a74b90175a45a95df6469.png) and this is my CSS: ``` div.minimalistBlack { border: 3px solid #000000; width: 100%; text-align: left; border-collapse: collapse; } .divTable.minimalistBlack .divTableCell, .divTable.minimalistBlack .divTableHead { border: 1px solid #000000; padding: 5px 4px; } .divTable.minimalistBlack .divTableBody .divTableCell { font-size: 13px; } .divTable.minimalistBlack .divTableHeading { background: #CFCFCF; background: -moz-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%); background: -webkit-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%); background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%); border-bottom: 3px solid #000000; } .divTable.minimalistBlack .divTableHeading .divTableHead { font-size: 15px; font-weight: bold; color: #000000; text-align: left; } .minimalistBlack .tableFootStyle { font-size: 14px; } /\* DivTable.com \*/ .divTable{ display: table; } .divTableRow { display: table-row; } .divTableHeading { display: table-header-group;} .divTableCell, .divTableHead { display: table-cell;} .divTableHeading { display: table-header-group;} .divTableFoot { display: table-footer-group;} .divTableBody { display: table-row-group;} Any help you could give me would be hugely apprecitated. ``` ---
**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:** [December 13, 2023, 5:33pm UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/15 "2023-12-13T17:33:38Z")
Which plan are you on? As I said in my earlier reply… > [@Darren\_Murphy](#): > > The only caveat is that unless you have a Business Plan or better, then all of your table styling (CSS) needs to be applied inline. That is, adding CSS to a rich text component is no longer supported. ---
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [December 13, 2023, 5:35pm UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/16 "2023-12-13T17:35:53Z")
I’m on a business plan, but its under the trial period currently don’t know if that makes a difference? ---
**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:** [December 13, 2023, 5:38pm UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/17 "2023-12-13T17:38:26Z")
Okay, cool. So to apply your CSS, go to Settings-\>Appearance, and you should see a section labeled “Custom CSS” Paste your CSS in there. ![CleanShot 2023-12-14 at 01.37.40@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/7/0763c1c14b20901b445ebb93026cda76dba823c8.jpeg) ---
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [December 13, 2023, 5:41pm UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/18 "2023-12-13T17:41:18Z")
![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/4/84d9b3996bd64a6bd4b013b4cf935828b4765d58.png) Amazing! Thank you ---
**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:** [December 13, 2023, 5:43pm UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/19 "2023-12-13T17:43:18Z")
Wonderful 👍 ---
**Author:** ![Si\_Gal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/si_gal/32/79433_2.png) [@Si\_Gal](https://community.glideapps.com/u/Si_Gal)\ **Post date:** [December 13, 2023, 5:45pm UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/20 "2023-12-13T17:45:37Z")
and presubaly, to create a title row for the table I would have to create some new HTML and CSS? ---
**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:** [December 13, 2023, 5:49pm UTC](https://community.glideapps.com/t/custom-css-for-data-table/68636/21 "2023-12-13T17:49:17Z")
You could extend your existing HTML, or just use a Text component and place it above the table. [Next page](https://community.glideapps.com/t/custom-css-for-data-table/68636.md?page=2)