0

How can i fix table out of screen if it's inside centered flexbox?

enter image description here

Sandbox.

import React from "react";
import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`;

export default function App() {
  return (
    <Wrapper>
      <h1>Hello CodeSandbox</h1>
      <p>
        1__________ 2______________ 3______________ 4____________ 5----------
        6----------------- 7 ----------- 8 -----------------
      </p>
      <table border="1">
        <tr>
          <th>Россия</th>
          <th>Великобритания</th>
          <th>Европа</th>
          <th>Длина ступни, см</th>
        </tr>
        <tr>
          <td>34,534,534,534,534,534,534,534,534,534,5 </td>
          <td>
            3,534,534,534,534,534,534,534,534,534,534,534,534,534,534,534,534,5
          </td>
          <td>36</td>
          <td>23</td>
        </tr>
      </table>
    </Wrapper>
  );
}
ZiiMakc
  • 31,187
  • 24
  • 65
  • 105
  • 1
    wrapping your table in a `margin: auto` wrapper will fix the scroll, won't center the content though, might find more answers in https://stackoverflow.com/questions/33454533 – Rod911 Jul 07 '20 at 10:23

1 Answers1

1

For the table.

table {
  table-layout: fixed;
  width: 100%;
}

Set table column width. Add class flexbox to table container.

.flex-div {
  ...
  overflow: auto;
}

Add flex-item class to tr, set min-width instead of width.

.flex-item {
  ...
  min-width: 200px;
}
Rithik Banerjee
  • 447
  • 4
  • 16