Search code examples
htmlcsscss-tables

How can I allow an inner element to horizontally overflow outer element while staying centered?

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:Sketch made in MS Paint

Solution

  • 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.

    body {
  margin: 0;
}

main {
  width: 50%;
  min-width: 600px;
  margin: auto;
  position: relative;
  border: 1px solid red; /* for debugging purposes */
}

.wide-table {
  /* TODO */
  display: block;
  width: max-content;
  min-width: 100%; /* depending on whether this is what is wanted, if not just remove it*/

  border: 1px solid blue; /* for debugging purposes */
   position: relative;
   left: 50%;
   transform: translateX(-50%);
}
    <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>