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;}
table section display:flex justify-content:center
-
- Rank 0 - Newcomer
- Posts: 2
- Joined: Wed Oct 06, 2021 4:35 am
-
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
Re: table section display:flex justify-content:center
What happens when you remove ?
My initial thought is that that has something to do with it.
Code: Select all
display: flex
My initial thought is that that has something to do with it.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
-
- Rank 0 - Newcomer
- Posts: 2
- Joined: Wed Oct 06, 2021 4:35 am
Re: table section display:flex justify-content:center
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:
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:
Thank you very much for your help.
Code: Select all
section {display: justify-content: center;}
section {justify-content: center;}
section {display: flex; }
Code: Select all
section {margin-left: auto; margin-right: auto; width: 68.250em}
table {table-layout:fixed; border-style:none; width:68.250em;}
-
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
Re: table section display:flex justify-content:center
I'm glad that was useful and that you have resolved the issue.
Yes, typically to center something like a table you would use the following CSS:
Yes, typically to center something like a table you would use the following CSS:
Code: Select all
table { margin-left: auto; margin-right: auto }
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial