How *should* this content be rendered when h-scrolling is introduced?_问答_开发者

How *should* this content be rendered when h-scrolling is introduced?

开发者 https://www.devze.com 2022-12-09 15:38 出处：网络

Giv开发者_StackOverflow社区en markup like this: <body> <div style=\'text-align:center\'>header</div>

Giv开发者_StackOverflow社区en markup like this:

<body>
  <div style='text-align:center'>header</div>
  <table>
    <tr><td>
      really_wide_table................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
    </td></tr>
  </table>
</body>

How should it be rendered if the table is so wide that horizontal scrollbars are introduced?

Should the header div be centered in the left-most visible screen, or centered above the table? Or something else?

Note: I know what does happen, what I'm looking for is an official reference that defines what should happen (I ran into an issue).

A div is a block element and by definition has its default width set to 100% of it's parent container. The parent container in this case is the visible part of the browser window.

So no matter how wide (or how narrow; try it) the table below (or any element for that matter), the div will still fill 100% of the visible browser window.

Since the div is as wide as the window, it will appear centered in the window.

I don't have any "official" reference to this but I do know this is how the DOM and CSS specifications work.