Table Builder Alignment

[STL Volleyball Tony]

Would like to be able to set column alignment using table builder page element.  The first column defaults to a left alignment, whereas the other columns default to center alignment.  

If not able to allow alignment for each column to be set, can all columns be defaulted to center alignment?

[SportsEngine Staffer]

You can center that first column by dropping this code on the page, either by placing it in the head code (single page or cascading throughout that section of the site) or by using the Code page element.

 

<style>.dataTable td:first-child {

text-align: center;

}</style>

 

 

 

If you want everything to be aligned left, drop in this code:

 

 

<style>.dataTable td {text-align: left;}

.dataTable thead {

text-align: left;

}

</style>

 

 

 

 

If you want that left alignment to apply only to specific tables, you can make that code a specific CSS class by typing in .tableLeft (as an example) and then adding this code to the cascading head code on all sections on your site. Now, when you create a table, you can add tableLeft in the Custom CSS Class field when building the table.

 

Here's the code for that scenario:

 

 

<style>.tableLeft .dataTable td {text-align: left;}

.dataTable thead {

text-align: left;

}

</style>

[STL Volleyball Tony]

That works, however, the top row (header) is still left aligned.  Please advise if I'm missing something.  Thanks again!

[SportsEngine Staffer]

Make sure you are out of Edit mode and in User mode when you test the style changes, as they will only appear in User mode.

 

If that's not the issue, send me a screen shot of the table you are working on and the code you are using. Also, let me know where you are placing the code (you are using Code page element or Edit Head Code option).

 

- Loren

[STL Volleyball Tony]

Currently - code is placed in the Head Code option.  I also tried it in the code page element with the same result.  Viewed in user mode.  I also viewed in entirely different browser as a user as well.  Thanks again!

 

 

[SportsEngine Staffer]

The code is a bit different with each SportsEngine theme, so I think this slightly tweaked code should get that first column header centered for you:

 

<style>.dataTable th:first-child {

text-align: center;

}

</style>

[STL Volleyball Tony]

That worked!  Thank you!