I have the following HTML/CSS webpage:
body {
margin: 0;
}
main {
width: 50%;
min-width: 600px;
margin: auto;
border: 1px solid red; /* for debugging purposes */
}
.wide-table {
/* TODO */
display: block;
width: max-content;
max-width: none;
margin: 0 auto;
border: 1px solid blue; /* for debugging purposes */
}<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Anki Package Update Checker</title>
</head>
<body data-page-id="browse" data-new-gr-c-s-check-loaded="14.1034.0" data-gr-ext-installed="">
<main>
<header>
<h1>Heading</h1>
</header>
<article>
<p>Text 1.</p>
<p>Text 2.</p>
<p>Text 3.</p>
<table class="wide-table">
<tbody>
<tr>
<th class="txt-l">Name</th>
<th class="txt-l">Author</th>
<th>Version</th>
<th>Last updated at</th>
</tr>
<tr>
<td class="txt-l"><a href="/entry/1">Normal-length name</a></td>
<td class="txt-l">Developer</td>
<td>2</td>
<td>2023-08-14 13:30:55</td>
</tr>
<tr>
<td class="txt-l"><a href="/entry/2">Very Long test deck name to check for table formatting</a></td>
<td class="txt-l">Dev</td>
<td>1</td>
<td>2023-08-14 13:24:40</td>
</tr>
</tbody>
</table>
<p>Text 4.</p>
</article>
</main>
</body>
</html>The table can be less or more wide, depending on its content. When it is wider than <main>'s left and right boundaries allow, it starts to break the text inside and it looks ugly. I want to avoid that, so whenever the table requires more space than <main>'s width, I want it to overflow its left and right borders, while staying centered on the screen.
The closest I have achieved is in the snippet above. The problem is, it only overflows the right border like this.
What I want to achieve can be seen on this sketch:
You could position it the 'old-fashioned' way, move it lefthalf the width of its parent and then back right by half the width of itself.