Html - CSS - Too wide table in flexbox

PetrKlekner
June 6, 2023
237 views
0 votes
2 Answers

i create my layout with flexbox and now i would like show table. But when a table has a lot of records, it doesn’t add a scroll bar, it overflows the page. Does anyone know what to do about this? I have looked variously on the net and found this problem, however, nowhere have I found a completely reliable solution… For simplicity, I’ve simplified the example. Thank you

<div>
  <div style="display: flex;">
    <!-- Layout -->
    <div style="display: flex;">
      <!-- Layout -->
      <div style="display: flex;">
        <!-- Layout -->
        <div>
          <table>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>City</th>
              <th>Note</th>
            </tr>
            <tr>
              <td>Pepík zdenda z Brna</td>
              <td>245</td>
              <td>Sat Oct 10 1998 00:00:00 GMT+0200 (Central European Summer Time)</td>
              <td>Moc dlouha poznamka, ktera je fakt nesnesitelně dlouha</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

Result:

What i want:

Thank you very much

Edit:

What i have:

What i want:

Answers

I have added overflow-x: auto; on the parent div of the table you can find more details about table responsiveness here and added some styling to the table like padding, from my side it works.

th, td {
  text-align: left;
  padding: 10px;
}

<div>
  <div style="display: flex;">
    <!-- Layout -->
    <div style="display: flex;">
      <!-- Layout -->
      <div style="display: flex;">
        <!-- Layout -->
        <div style="overflow-x:auto;">
          <table>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>City</th>
              <th>Note</th>
              <th>Name</th>
              <th>Age</th>
              <th>City</th>
              <th>Note</th>
              <th>Name</th>
              <th>Age</th>
              <th>City</th>
              <th>Note</th>
            </tr>
            <tr>
              <td>Pepík zdenda z Brna</td>
              <td>245</td>
              <td>Sat Oct 10 1998 00:00:00 GMT+0200 (Central European Summer Time)</td>
              <td>Moc dlouha poznamka, ktera je fakt nesnesitelně dlouha</td>
              <td>Pepík zdenda z Brna</td>
              <td>245</td>
              <td>Sat Oct 10 1998 00:00:00 GMT+0200 (Central European Summer Time)</td>
              <td>Moc dlouha poznamka, ktera je fakt nesnesitelně dlouha</td>
            <td>Pepík zdenda z Brna</td>
              <td>245</td>
              <td>Sat Oct 10 1998 00:00:00 GMT+0200 (Central European Summer Time)</td>
              <td>Moc dlouha poznamka, ktera je fakt nesnesitelně dlouha</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

u can see in the code I have added more columns and it is working.

Try add overflow-x: scroll; and remember include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in head.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    th, td {
    text-align: left;
    padding: 10px;
  }
  
  </style>
</head>
<body>

<div>
<h1>Title</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div style="width:90%;" >
  <div style="display: flex;  overflow-x: scroll;">
    <!-- Layout -->
    <div style="display: flex;">
      <!-- Layout -->
      <div style="display: flex; ">
        <!-- Layout -->
        <div>
          <table>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>City</th>
              <th>Note</th>
              <th>Name</th>
              <th>Age</th>
              <th>City</th>
              <th>Note</th>
              <th>Name</th>
              <th>Age</th>
              <th>City</th>
              <th>Note</th>
            </tr>
            <tr>
              <td>Pepík zdenda z Brna</td>
              <td>245</td>
              <td>Sat Oct 10 1998 00:00:00 GMT+0200 (Central European Summer Time)</td>
              <td>Moc dlouha poznamka, ktera je fakt nesnesitelně dlouha</td>
              <td>Pepík zdenda z Brna</td>
              <td>245</td>
              <td>Sat Oct 10 1998 00:00:00 GMT+0200 (Central European Summer Time)</td>
              <td>Moc dlouha poznamka, ktera je fakt nesnesitelně dlouha</td>
            <td>Pepík zdenda z Brna</td>
              <td>245</td>
              <td>Sat Oct 10 1998 00:00:00 GMT+0200 (Central European Summer Time)</td>
              <td>Moc dlouha poznamka, ktera je fakt nesnesitelně dlouha</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
  
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – CSS – Too wide table in flexbox

Answers