How to style table |
Post Reply | Page <12 |
Author | |
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
How do I center a table and size its columns?. The following are the steps I used: - Add a Table element to the page - Main Frame: center it by right click/Alignment/Center and set Width=100%, Height=Auto - Table: set to 3 columns x 6 rows and set to Width=90%, Height=Auto - Row 0: enter column labels Label 0, Label 1, Label 2 - Select individual cell and set its width one by one Cell 0-0, 0-1, 0-2 to 40%, 30%, 20% respectively (leaving 10% space) Cells of row 0 seem to have proper widths as set. At this point, however, the table is always left justified regardless of what I set via Table - Right click/Alignment/Center or Right. Questions: 1). How do I center the table?. 2). How do I set cells within a column to the same width, do it individually as above or there is a proper way?. 3). Similar to 2) above but how to set height for each row? Thanks. |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6194 |
Post Options
Thanks(0)
|
Using % as width sets the width to a % of the parent element width
The table design sets it's size by row width puching the table width. The table width reacts to column width and column width is related to it's content. An OE table is something designed to be as easy as possible to fill by anyone. It is more complicated than a streight HTML table. Ease on one side comes with difficulties on th other side. Alo this element was designed in an older version of OE before responsveness. In OE, you can use CSS code like
Edited by Hobby001 - Jul 28 2021 at 2:39am |
|
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
On my actual page, I have multiple tables so it looks like I would need to modify your CSS code and somehow tie it to individual tables since they all use OESZ_Column_x property. After experimenting with various settings, I think the column width is dictated by the cell's content (as you mentioned above) and is regardless of what column width percentage as well as max width in px you set. It keeps expanding even beyond the table's Main Frame. In my application, this is what I try to avoid since my tables show status of certain things and I would like to keep them in proper sizes and proportions. As far as centering a table in a container, I set its Main Frame to the desired width percentage (say, 80%) and center it. I then set the Table to 100% width to fill up the frame and the table follows its frame (centered and the required size). Anything less than 100%, the table will be left justified. Having said that, the table size can increase due to its cell's content as above. At this time, I just have to find a way to work around this to make my tables look right. |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6194 |
Post Options
Thanks(0)
|
Since the table expands as per the content, you have to control the content diplay
|
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6194 |
Post Options
Thanks(0)
|
To specify one table, use the element ID
Edited by Hobby001 - Jul 29 2021 at 3:01am |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6194 |
Post Options
Thanks(0)
|
To specify multiple tables, add a custom class like MyNewTableSize to each of them
Edited by Hobby001 - Jul 29 2021 at 3:03am |
|
Post Reply | Page <12 |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |