Describe your context
Dash table's cell can't get smaller than 30px, even after defining the height of the cell using the cell_style and changing the font size. I also tried implementing some CSS rules in a CSS file, but nothing worked

Version of dash 3.0.4

Example:

from dash import Dash, dash_table
import pandas as pd
from collections import OrderedDict

app = Dash()

data = OrderedDict(
    [
        ("Date", ["", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", ["", -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", ["", 20, 30, 40, 50, 60]),
        ("Pressure", ["", 10924, 3912, -10, 3591.2, 15]),
    ]
)

df = pd.DataFrame(
    OrderedDict([(name, col_data * 10) for (name, col_data) in data.items()])
)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    page_size=10,
    style_cell=dict(height='10px', font_size=10)
)

if __name__ == '__main__':
    app.run(debug=True)

I think that the problem is related to how CSS defines the height of a cell

From the doc:

Why the css? Fixed height cells are tricky because, by CSS 2.1 rules, the >height of a table cell is "the minimum height required by the content". So, here we are setting the height of the cell indirectly by ?>setting the div within the cell.

In this example, we display two lines of data by setting the line-height to be 15px and the height of each cell to be 30px. The >second sentence is cut off.

There are a few limitations with this method:

It is not possible to display ellipses with this method.
It is not possible to set a max-height. All of the cells need to be the same height.
Subscribe to plotly/dash-table#737 for updates or other workarounds on this >issue.