Start a new topic

Aesthetical CENTERING TITLE Vertical/Horizontal

If titles STYLE could be dissociated from the  below columns value styling.


For instance Form table Titles looks better when centered both - "vertically" & Horizontally above their column values, even when their respective Cell text is placed on the right side of the column...


By default, I would set all column title to be centered placed independently to the position their column content will be...


*picture illustrate the "funny" looking of all mixed Title styling...


Yes, in that case you can switch the css to 


.table>thead>tr>th{

    text-align: center !important;

}


And select the positioning of each column (under the header) you want in settings 


1 person likes this

Yes, as of now theres no default way to do this. 


For a quick fix you can add the following to the custom CSS section of the page that contains the table

.table>tbody>tr>td {

    text-align: left !important;

}


1 person likes this

If you go into the settings of the Data Table you can edit the column you want to center by clicking Format > Alignment > Center 

Yes you can add 


vertical-align: middle;


So the CSS should look like,


.table>thead>tr>th{

    text-align: center !important;

    vertical-align: middle;

}

Ok, This will mostly change the Columns content to left...

What would be the CSS syntax to align the column "TITLE" to Center ?


.table>title ?

For the Title you can refer to my first answer... (go into the settings of the Data Table and select Format > Alignment > Center)

Hello, yes I found this,

Here I am refering to the TITLE being styled Center, while all the Values (under the Title) that is the inputs values, like phone numberse etc...being Styled on the Right side.


To our point of view. 

The Title looks better Centered.

But the Values look better on the Right side.

As for now, I think that there is no way to set 2 distinct Style, 1 for the Title and 1 for the values...as I would wish to.


Or maybe I m wrong...?

Oh, I see, you want to do it the reverse way...


Well that will not be working for my Needs, this is the reason why :


Titles line / Text Content:


          Number Col A             :                        Text Col B            :           Number Col C           : 

                                         123   : ABC                                              : 987                                           :

                                         456  : DFG                                               : 654                                           :

                                                   :                                                        :                                                   :


In your Form :

1* if you need all the TITLE to be centered : you would need to assign a CSS to center them all.

The settings Format > alignment > Center....applies to the Detail content... 123, ABC, etc... 

but - as far as we are testing - it does not apply not to the Titles :  Number Col A, Text Col B, etc...

:( 


2* With the CSS given as : .table>tbody>tr>td { text-align: left !important;

this will also align all my Details content, 123, ABC the left...but I need each column to be align LEFT AND the next one to be RIGHT aligned. 

(Numbers on Left / Text on Right)

So I could not apply a general CSS to align all columns on just one side...


Sugestion : A CSS acting just on the TITLE LINE would be more appropriate... :)




   




SOLVED* :)

Much Better indeed !
 increasing the column by 10 pixels and using this CSS:

.table>thead>tr>th{

    text-align: center;

    vertical-align: middle;

}

(removing the "!important" words) give quite a good result.

Thanks...


image


Perfect, Yes, this is what I was looking for.


2nd) Is there an equivalent in CSS to "centering the same Title verticaly" too ?


As seen in G.Drive :

image


...Two other Columns still look unaligned but in the Vertical sense now...

Login or Signup to post a comment