Struggling to set/reduce html.Td() margin or padding

[marketemp]

I creating a table and for the life of me cannot reduce the vertical margin or padding of my table cells. I have set style={'margin': 0, 'padding': 0} for the html.Td(), html.Tr(), and html.Table() and no matter what I do, I have a vertical cell padding that is larger than I would like:

The only things being set are the font size and background color within the className setting.

The missing 4th and 5th elements simply reinforce that the spacing isn’t caused from extra padding within the left-hand title cells.

What is the trick to modify this correctly either in the call directly or within an assets/.css file definition? All efforts have been fruitless for me so far.

thanks

[jcuypers]

Hi,

Did you check the resulting styles / CSS with developer tools (F12)?

Reg,j.

[jcuypers]

Also, it would be nice to post some actual code

[marketemp]

Here is the code. Sorry if it’s messy with my definitions but the className vars are what matters.

        trs = [
            html.Tr([
                html.Td(self.tooltip(self.dash.term[f'{mktetfseg}_n_median_tm'],
                                     f'term_{mktetfseg}_median'),
                        className='mkt-fsth_lg'),
                html.Td(ff, className=f'mkt-fs30 bg-primary mkt-pm1 {self.rgtd_border()}'),
            ]),
            html.Tr([
                html.Td(self.tooltip(self.dash.term[f'{mktseg}_n_temp_tm'],
                                     f'term_{mktseg}_temp'),
                        className='mkt-fsth_lg'),
                html.Td(f'{mkt:.1f}', className=f'mkt-fs30 mkt-pm1 {mrgc}'),
            ]),
            html.Tr([
                html.Td(self.tooltip(self.dash.term['dollar_n_temp_tm'],
                                     'term_dollar_temp'),
                        className='mkt-fsth_lg'),
                html.Td(f'{dt:.1f}', className=f'mkt-fs30 mkt-pm1 {drgc}'),
            ]),
        ]

        divs.append(html.Table(trs))
        return html.Div(divs)

Here is the developer tools indicating what styles are applied:

And the definition of each of those styles:

bg-primary defines the color
mkt-fs30 defines the font size:
.mkt-fs30 {font-size: 3.0em;}
mkt-pm0 is my attempt to override the bootstrap td border and margin that I would customize if it were working:

mkt-pm1 {
  padding: 1px 1px 1px 1px;
  margin: 1px 1px 1px 1px;
}

mkt-rgtd-border creates a dark or light border around the cells depending on a theme setting.

.mkt-rgtd-border {
  border: 1px solid #FFFFFF;
  color: #000000;
  text-align: center;
  font-weight: bold;
}

and one other style setting applied to td:

td {
  overflow: hidden;
  text-align: center;
  white-space: pre-line;
}

All I want is to have the correct CSS definition that will reduce the vertical padding on the table cells of the right column.

[jcuypers]

Hi,

Regarding the developer tools, I was referring to focus in on the one that has the issue and see if you can play around to understand what is wrong.

I would offer you to try the following troubleshooting (since the 2nd picture looks actually quit ok):

1. try the same with 3 items which are identical and remove the rest. So as in duplicate the first entry 3 times and remove the rest. Do you get consistent spacing or not? I would assume yes.

2. try to play with !important on the padding and margin

3. try to play with white-space pre-line.

4. try to remove some of the elements of the tooltip and/or the tooltip itself and replace with a span of something else to see what introduces to problem.

5. use background colours to understand what’s happening

Maybe others have better ideas, mine is just a way to try to understand what’s on?

You have an MRE of some simple online page where we can check? It would help in the procesS

“All I want is the correct CSS” is reached by trial and error, unfortunately (or directly, by someone else who solved it several times by trial and error ). I’m afraid there are no shortcuts

Reg,
J.

[marketemp]

thanks for your comments. CSS is so frustrating when it works 85% of the time but you can spin for hours trying to get that final 15% to work when something doesn’t. I’ll append when I ever solve this.

[martin2097]

Hello @marketemp !

Is there any apecific reason to build the table by hand?

Building components from html is like reinventing the wheel. There is just so much work that somebody else did before you.

If I may suggest check out dash datatable or dash ag grid for tables. I see that you are building some dashboard with some indicators and triggers. Maybe check also the dash mantine components. You can get a lot more using these libraries with far less energy on it!