How to `vertical-align:middle` content inside td and th

hAtul89

(Mainly for small screens displays..)
The content text isn't in the middle of the cells

TDs are set by css to:

.table td, .table th {
    padding: 1rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

and THs to:

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

I have currently set this to solve it:

#datatable{

    td, th {
        vertical-align: middle;
    }
}

And I was wondering if there is a better way to do this via datatable js settings...

colin

Hi @hAtul89 ,

Yep, that's as good a way as any. You can set the classname dynamically with columns.classname, but if it's a table in the DOM, you can just assign to the table.

Cheers,

Colin