table section display:flex justify-content:center

Discussion about CSS related issues.
Post Reply
graphic
Rank 0 - Newcomer
Rank 0 - Newcomer
Posts: 2
Joined: Wed Oct 06, 2021 4:35 am

table section display:flex justify-content:center

Post by graphic »

Hello (first post),
Every week I send an html file to a small mailing list. The file contains just one table and nothing else. When I started doing this I created the table in Excel and saved it as a single-page html file. The file contains a lot of repeated selector properties in the css style part and repeated classes in the <td>s. I am now trying to produce an identical output using just HTML5, CSS3 and, of course, Validator Standard.

I have succeeded so far and the HTML5 output looks the same in a web browser as that from Excel. The problem is an annoying difference in the way they behave when I reduce the width of the browser window. I have centred the table in the browser window. In the Excel version, if I narrow the window, the table stays centred until the window is narrower than the (fixed width) table. The table then locks at the left edge of the browser window and a horizontal scroll bar appears. That's what I want; the rest of the table is still accessible via the scroll bar. However, when narrowing the browser window in the HTML5 version, the table stays centred, disappearing off the left side as well as the right side. The scroll bar is not centred and will only scroll to the right. The hidden part of the table to the left is not accessible.

Do you have any suggestions as to how to make the HTML5 version behave like the Excel version? I have copied below those parts of the Excel code and HTML5 code that I think must be involved.

Excel version
.xl65 {white-space:nowrap;}
<div id='new dap index_' align=center x:publishsource='Excel'>
<table width=1091 class=xl65 style='border-collapse:collapse; table-layout:fixed; width:819pt'>

HTML5 version
<meta name="viewport" content="width=device-width, initial-scale=1.0">
section {display: flex; justify-content: center;}
table {table-layout:fixed; border-collapse:collapse; white-space:nowrap; width:68.250em;}
User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3639
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: table section display:flex justify-content:center

Post by Albert Wiersch »

What happens when you remove

Code: Select all

display: flex
?

My initial thought is that that has something to do with it.
graphic
Rank 0 - Newcomer
Rank 0 - Newcomer
Posts: 2
Joined: Wed Oct 06, 2021 4:35 am

Re: table section display:flex justify-content:center

Post by graphic »

Thank you for pointing me to the right spot. Having any of these options just puts the table in the section at the left edge of the broser window, without being centred:

Code: Select all

section {display: justify-content: center;}
section {justify-content: center;}
section {display: flex; }
However, the following has worked the way I want. Narrowing the browser window moves the table in the section to the window's left edge and fixes it there:

Code: Select all

section {margin-left: auto; margin-right: auto; width: 68.250em}
table   {table-layout:fixed; border-style:none; width:68.250em;}
Thank you very much for your help.
User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3639
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: table section display:flex justify-content:center

Post by Albert Wiersch »

I'm glad that was useful and that you have resolved the issue. :D

Yes, typically to center something like a table you would use the following CSS:

Code: Select all

table { margin-left: auto; margin-right: auto }
Post Reply