BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - How to style table
  FAQ FAQ  Forum Search   Register Register  Login Login

How to style table

 Post Reply Post Reply Page  <12
Author
Message
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 26 2021 at 5:50pm
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.


Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 28 2021 at 2:37am
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

.OESZ_Column_0{
width:33.33%;
}
.OESZ_Column_1{
width:33.33%;
}
.OESZ_Column_2{
width:33.33%;
}


Edited by Hobby001 - Jul 28 2021 at 2:39am
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 28 2021 at 9:44pm
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.


 
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 29 2021 at 2:56am
Since the table expands as per the content, you have to control the content diplay
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 29 2021 at 3:00am
To specify one table, use the element ID

#WE4ffeb48596 .OESZ_Column_0{
width:33.33%;
}
#WE4ffeb48596 .OESZ_Column_1{
width:33.33%;
}
#WE4ffeb48596 .OESZ_Column_2{
width:33.33%;
}


Edited by Hobby001 - Jul 29 2021 at 3:01am
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 29 2021 at 3:02am
To specify multiple tables, add a custom class like MyNewTableSize to each of them

.MyNewTableSize .OESZ_Column_0{
width:33.33%;
}
.MyNewTableSize .OESZ_Column_1{
width:33.33%;
}
.MyNewTableSize .OESZ_Column_2{
width:33.33%;
}


Edited by Hobby001 - Jul 29 2021 at 3:03am
Back to Top
 Post Reply Post Reply Page  <12
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.047 seconds.