thead height and vert align

  • Resolved imincognito

    (@imincognito)


    2 years, 7 months ago

    Hi Tobias,

    I’m getting a really weird formatting error. Trying to;

    – set a fixed height for thead
    – vertically align header content

    This is what I currently have – it doesn’t quite vertically align:

    .tablepress thead th
	{
vertical-align: middle !Important;
background-color: #7986CB !Important;
font-family: Raleway !Important;
font-size: 16px !Important;
font-weight: 300 !Important;
color: #F8F8F8 !Important;
text-align: center;
	}

This is what I have for tbody and it works perfectly:

    .tablepress tbody td
    {
    height: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
    vertical-align: middle;
    font-family: Raleway !Important;
    font-size: 16px !Important;
    font-weight: 300 !Important;
    color: #282828 !Important;
    text-align: center;
    text-align: left;
    }

    But when I add the following to thead (even with !important), it doesn’t qute work for mobile:
    height: 30px;
    padding-top: 4px;
    padding-bottom: 4px;

    The header row height is off (too large) and the content is not vertically aligned.

    Note, I’m also using fixed columns and responsive.

    Shortcode is:
    [table id=1 datatables_fixedcolumns_left_columns=1 responsive=”scroll” /]

    Thx

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Most likely, the FixedColumns plays a role here, as it basically adds another table on of the actual one, to resemble the look of the fixed column. This involves calculating and setting cell heights, which likely is the reason for this behavior. My recommendation would be to only work with padding and line height. That usually works best.

    (Note that using both FixedColumns and Horizontal Scrolling on the same table does not make sense, so please remove the responsive=scroll parameter again.)

    Regards,
    Tobias

    Thread Starter imincognito

    (@imincognito)

    Tobias,

    Thx for the quick reply.

    – responsive-scroll removed, per your recommendation.

    works fine for:
    – desktop thead
    – desktop tbody
    – mobile tbody

    vertical align still not working for
    – mobile thead

    Looks like sth is adding a 4px margin-bottom to thead (for mobile). Is DTFC-clone from datatables and could that be it, or maybe it’s coming from the default elementor Hello Theme..

    • This reply was modified 2 years, 7 months ago by imincognito.
    • This reply was modified 2 years, 7 months ago by imincognito.
    • This reply was modified 2 years, 7 months ago by imincognito.
    • This reply was modified 2 years, 7 months ago by imincognito.
    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    the DTFC-clone element is automatically created by the external DataTables JS library, based on calculations on the actual table. Unfortunately, these can sometimes be off by a few pixels (from rounding errors, but also difference in borders, etc. and how the browser displays them). I’m not aware of a solution to this, unfortunately ??
    Regards,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘thead height and vert align’ is closed to new replies.