Table overflowing outside of div

You can prevent tables from expanding beyond their parent div by using table-layout:fixed.

The CSS below will make your tables expand to the width of the div surrounding it.

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

I found this trick here.

A crude work around is to set display: table on the containing div.

Turn it around by doing:

<style type="text/css">
  #middlecol {
    border-right: 2px solid red;
    width: 45%;
  }

  #middlecol table {
    max-width: 400px;
    width: 100% !important;
  }
</style>

Also I would advise you to:

• Not use the center tag (it's deprecated)
• Don't use width, bgcolor attributes, set them by CSS (width and background-color)

(assuming that you can control the table that was rendered)

overflow-x: auto;
overflow-y : hidden;

Apply the styling above to the parent div.

If your tables are breaking out of your block-level elements, turn your container into an "inline-block" like so:

div {
    display:inline-block;
}

This will wrap your container around your table no matter how big it grows. The advantage to using display:inline-block is it works in over 20 years worth of browsers whereas the other solutions people are posting only work in a narrow range of the newest browsers only, so will fail for many of your users. You can also set your parent container to display:table, which will "nest" your table into another table and contain it. Remember, nesting tables is also allowed in HTML and works in almost every browser ever invented!

Once you have it wrapped, you can then add more styles to control the container's width until it expands and contain the view of your table until it does need to stretch. Also, the only way to confine an expanded table and let users still see all of its content in its parent container is to also add overflow:visible or overflow:scroll. Below, as an example, I have added the width I want to constrain initially and the overflow extra...

 div {
    display:inline-block;
    overflow:scroll;
    width: 300px
}

Remember, all tables will eventually have unexpected content in their cells that could break out of containers or extend the table or page width way beyond what you expect, so setting width to "auto" is generally best for containers holding tables with unknown content sizes like images. You cannot stop tables that grow unexpectedly like this, or plan for that event, unless you have complete control over ever possible aspect of the content that fills them (which is rare). But you can control the parent that wraps around it.

And...never download and install these new JavaScript hacks or gigantic script libraries written by kids today to fix simple HTML or CSS problem developers solved 20 years ago. :)

You may try this CSS. I have experienced it working always.

div {
  border-style: solid;
  padding: 5px;
}

table {
  width: 100%;
  word-break: break-all;
  border-style: solid;
}

<div style="width:200px;">
  <table>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
    <tr>
      <td>data 1</td>
      <td>data 2</td>
      <td>data 3</td>
      <td>data 4</td>
      <td>data 5</td>
    </tr>
    <table>
</div>

I used Mr. Doomsbuster's answer of using word-break: break-word; because there were long strings in the table causing it to extend beyond the containing div.

I then found break-word is deprecated.

So instead i used:

table {
    overflow-wrap: anywhere;
}

Put it in <TableContainer /> like blow

import { TableContainer, Table } from '@mui/material';


export default myTable = () => {

    return (
        <TableContainer>
            <Table>
                // ...
            </Table>
        </TableContainer>
    )
}

There's a width="400" on the table, remove it and it will work...