Css - Page content to the right is being pushed off screen when using responsive table in Bootstrap

MA
December 30, 2023
152 views
0 votes
2 Answers

I have the following html (JSFiddle):

<div class="d-flex" style="max-width: 1460px;">
   <div style="width: 100%; background: red;">
      <div class="table-responsive">
         <table class="table">
            <tbody>
               <tr>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
               </tr>
               <tr>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
               </tr>
               <tr>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
   <div style="background: green; min-width: 300px; max-width: 300px; margin-left: 1rem;">
      2
   </div>
</div>

As you can see from the JSFiddle, the content is being pushed off screen to the right even though I am using the responsive table class. The layout is supposed to be main content + sidebar content, but the sidebar content is being pushed off screen for some reason. Could someone point me in the right direction please?

Tags: bootstrap-5 css

Answers

Flex doesn’t like its item with width and would rather handle that on its own.
So I removed one div with width: 100% and it worked.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<div class="d-flex" style="max-width: 1460px;">
  <div class="table-responsive">
    <table class="table">
      <tbody>
        <tr>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
        </tr>
        <tr>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
        </tr>
        <tr>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
          <td>Example</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div style="background: green; min-width: 300px; max-width: 300px; margin-left: 1rem;">
    2
  </div>
</div>

The sidebar is being pushed off the side of the viewport because of:

The width: 100% on the .table-responsive element’s <div> parent.
The fact that elements have min-width: min-content by default in a horizontal flex layout.

Consider removing the width: 100% and apply min-width: 0 to override the min-width: min-content.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="d-flex" style="max-width: 1460px;">
   <div style="min-width: 0; background: red;">
      <div class="table-responsive">
         <table class="table">
            <tbody>
               <tr>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
               </tr>
               <tr>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
               </tr>
               <tr>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
                  <td>Example</td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
   <div style="background: green; min-width: 300px; max-width: 300px; margin-left: 1rem;">
      2
   </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – Page content to the right is being pushed off screen when using responsive table in Bootstrap

Answers