Need CSS to reduce font size of table title text

App Development
1

I need to reduce the font size for table title text while using table-style-2. What is the CSS for this? I will be adding it for the entire app. Thank you.

2

I’d also like to know more about how to do stuff like this. Personally I’d like to be able to remove the table borders.

3

I am a learner as well, so let me try what I think.

First read something about CSS, this can be a great start:

In this case I would make a different class in CSS.
You can call it .special-table but the name doesn’t really matter much.

Then you should write the CSS for this class.
You can find out what kind of tag an item has, by inspecting the page (not the one in the builder, but the finished one) by right-clicking on the element on the page and then chose inspect from the menu.

There you will find probably that the table title has a h2 tag, so this means you will have to modify the tag in your new class.

.special-table>h2 {
  font-size: 15px; 
}

You can experiment with the font-size so it is to your liking.

In the table in the builder you have to add the special-table tag to the css input field, and then it should work.

Jesse - in your case you want to do it for the whole application. But if you change h2 label for your whole application it will also change the h2 for not table items.

So you will have to modify only the h2 for the tables.
I have looked at my code and the class for the tables is table-responsive.
So if you want to change the tag for table-responsive, you modify above code to:

.table-responsive>h2 {
  font-size: 15px; 
}

If you put this in your customer header code in the settings tab in the builder then it should work for the whole app.

But you should start the code in your header with the <style> tag.

There is not an easy way out for changing the standard components to your liking: either you ask a programmer to help you, or you have to learn HTML/CSS and possibly JavaScript yourself.

4

Thank you Peter. Unfortunately no luck changing the font size with that code. In header or CSS section.

5

Hi @JesseTron

The CSS for table headers is here…

.table-style-2 table>thead>tr>th {
	font-weight: 600;
	color: #B5B5C3 !important;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	vertical-align: middle;
}

The CSS for table row cells is here…

.table-style-2 table>tbody>tr>td {
	color: #3F4254;
	font-weight: 600;
    font-size: 14px;
}

Adjust as necessary :smile:

6

Hi Tim,
This worked for table headers perfectly. However, I actually need the Table Title size to be adjusted. :slight_smile:

Title Text Size
Title Text Size1058×486 38.2 KB

7

Ah OK, that can be changed through this CSS…

.table-style-2 h3 {
    color: #181C32;
    font-weight: 400;
    font-size: 30px;
    padding-left: 7px;
    padding-bottom: 10px;
    margin: 0;
}
8

Thank you Tim. That did it. :smiley: I changed the font size to 20px and it displays better on mobile for us.

9

Hi @tim.young ,
you also have 2 codes for:

  1. reduce the width of a related field in a list?
    the Custom Format function does not work

  2. reduce the width of the entire list, regardless of the fields and contents?
    Please note that I am using this CSS:
    Freeze Header in a table?

image
image2858×416 57.3 KB

Thank you