CODEWITHSUNDEEP
htmlcsshtml-table
waiwai933
waiwai933

Reputation: 14579

Table overflowing outside of div

I'm trying to stop a table that has width explicitly declared from overflowing outside of its parent div. I presume I can do this in some way using max-width, but I can't seem to get this working.

The following code (with a very small window) will cause this:

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

<div id="middlecol">
  <center>
    <table width="400" cellpadding="3" cellspacing="0" border="0" align="center">
      <tr>
        <td bgcolor="#DDFFFF" align="center" colspan="2">
          <strong>Notification!</strong>
        </td>
      <tr>
        <td width="50">
          <img src="http://www.example.com/img.png" width="50" height="50" alt="" border="0">
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </td>
      </tr>
    </table>
  </center>
 </div>

The red line is the right border of the div, and if you make your browser window small, you'll see that the table doesn't fit into it.

Upvotes: 174

Views: 327995

Answers (16)

Eric S.
Eric S.

Reputation: 171

Here is a simple 3 columns' table (css + html). The styles which matter are "table", "th" and "td". The other ones are just to display a better example:

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #069999;
}

h1 {
    text-align: center;
    min-width: 40vh;
}

.common-card {
    border: 1px solid rgb(248, 248, 248);
    padding: 20px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
    background: #aee6e6;
}


table, table thead th, table tbody tr td {
    border: 1px solid black;
    border-collapse: collapse;
}

table {
    /* table-layout:fixed; */
    width:100%;
    overflow-wrap: anywhere;
}

th {
    max-width: 50vw
}

td {
    max-width: 50vw
}
<body>
    <div class="common-card">
        <h1 id="table_title">Table</h1>
        <table>
            <thead>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Info</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Eric</td>
                <td>Salmon</td>
              </tr>
              <tr>
                <td>Rosty</td>
                <td>Malbout</td>
                <td>Here lies our dear beloved fellow Rosty, an antidisestablishmentarian, 
                    Whose life was quite contrarian. 
                    Feared long words. 
                    Hippopotomonstrosesquipedaliophobia, who knew? 
                    Inhaling silica was his final errand, alas, 
                    Pneumonoultramicroscopicsilicovolcanoconiosis took him fast. 
                    Rest now, dear friend, in silence profound, 
                    No long words here to chase you around.</td>
              </tr>
              <tr>
                <td>John-Lucas</td>
                <td>Robleti</td>
              </tr>
            </tbody>
          </table>
    </div>
</body>

Upvotes: 0

chheky
chheky

Reputation: 19

use "table-responsive"

<div class="container well">
 <!-- Responsive Table Wrapper -->
    <div class="table-responsive">
        <table id="propertyTable" class="table table-bordered">
            
<!-- rest of your table here. -->

Upvotes: 0

Matthew Rideout
Matthew Rideout

Reputation: 8566

Wrap The Table & Use CSS Grid

To force a table to not expand the parent container, while allowing the table to horizontally scroll with its full size, use the following pattern.

Wrap the table with a <div>

Wrap the table with a div and apply the following styles to the wrapper. This can be done programmatically with JavaScript if you need to apply it to all tables.

<div class="table-wrapper">
  <table>
    ...
  </table>
</div>

The grid display forces the wrapper to constrain to the parent width, and the overflow allows the child table to scroll.

white-space:normal allows the table to display its content normally

.table-wrapper {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  overflow: auto;
  white-space: normal;
}

Upvotes: 8

Prosper
Prosper

Reputation: 89

If anyone is struggling with this in 2023 the following might be very helpful.

We are going to make use of CSS grid, easily.

First - the parent div containing the table:

  • set the display to grid
  • set grid-template-columns to repeat(auto-fit, minmax(250px, 1fr)) (minmax first parameter can be any appropriate width you want, likewise the second param)
  • set overflow to scroll or auto

/* class name for my parent div*/
.table-responsive{
    background: #fff;
    border-radius: 5px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    overflow-x: scroll;
    border: 1px solid #ddd;
}

/* class name for my thead and tbody*/
.table-head,
.table-body{
    white-space: nowrap;
}

/* this is extra code. You dont need it for the main issue to work*/

.custom-table{
    width: 100%;
    border-collapse: collapse;
}
.custom-table th,
.custom-table td{
    padding: 0.5rem 1rem;
    text-align: left;
}
<div class="table-responsive">
    <table class="custom-table">
        <thead class="table-head">
            <tr>
              <th scope="col">#</th>
              <th scope="col">Client Name</th>
              <th scope="col">Service</th>
              <th scope="col">Style</th>
              <th scope="col">Contact</th>
              <th scope="col">Date Booked</th>
              <th scope="col">Time Booked</th>
              <th scope="col">Booking Fee</th>
              <th scope="col">Booked On</th>
              <th scope="col">Action</th>
            </tr>
        </thead>

        <tbody class="table-body">
            <tr> 
              <td scope="row">1</td>
              <td scope="row">Some client name here</td>
              <td scope="row">Some service name or type</td>
              <td scope="row">Some style</td>
              <td scope="row">some email or phone</td>
              <td scope="row">something here</td>
              <td scope="row">something here</td>
              <td scope="row">something here</td>
              <td scope="row">something here</td>
              <td scope="row">something here</td>
            </tr>
            <tr> 
              <td scope="row">1</td>
              <td scope="row">Some client name here</td>
              <td scope="row">Some service name or type</td>
              <td scope="row">Some style</td>
              <td scope="row">some email or phone</td>
              <td scope="row">something here</td>
              <td scope="row">something here</td>
              <td scope="row">something here</td>
              <td scope="row">something here</td>
              <td scope="row">something here</td>
            </tr>
        </tbody>
    </table>
</div >

NB: at this point your table should properly fit into its parent div, and scroll where necessary.

If you don't like the content of the table heads (th) and table body (td) to wrap or break, then the second step is ideal:

Second - the thead and tbody

  1. set both the thead (use any class you give it) and tbody to white-space: nowrap

Just like that you are cool to go.

Upvotes: 6

Stokely
Stokely

Reputation: 15947

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

    div {
        display:inline-block;
    }

Or simply turn it into a table display type...

    div {
        display:table;
    }

This will wrap your container around your table no matter how big it grows. The advantage to using display:inline-block or display:table is they work 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. :)

Upvotes: 9

Bambier
Bambier

Reputation: 864

Put it in <TableContainer /> like blow

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


export default myTable = () => {

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

Upvotes: -6

racitup
racitup

Reputation: 464

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;
}

Upvotes: 3

Kanab Paul
Kanab Paul

Reputation: 9

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>

Upvotes: 0

Christian Heath
Christian Heath

Reputation: 221

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

Apply the styling above to the parent div.

Upvotes: 9

Waheed Asghar
Waheed Asghar

Reputation: 179

I tried almost all of above but did not work for me ... The following did

word-break: break-all;

This to be added on the parent div (container of the table .)

Upvotes: 10

Mr. Doomsbuster
Mr. Doomsbuster

Reputation: 1384

I tried all the solutions mentioned above, then did not work. I have 3 tables one below the other. The last one over flowed. I fixed it using:

/* Grid Definition */
table {
    word-break: break-word;
}

For IE11 in edge mode, you need to set this to word-break:break-all

Upvotes: 63

Sander Koedood
Sander Koedood

Reputation: 6347

At first I used James Lawruk's method. This however changed all the widths of the td's.

The solution for me was to use white-space: normal on the columns (which was set to white-space: nowrap). This way the text will always break. Using word-wrap: break-word will ensure that everything will break when needed, even halfway through a word.

The CSS will look like this then:

td, th {
    white-space: normal; /* Only needed when it's set differntly somewhere else */
    word-wrap: break-word;
}

This might not always be the desirable solution, as word-wrap: break-word might make your words in the table illegible. It will however keep your table the right width.

Upvotes: 16

questzen
questzen

Reputation: 3297

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

Upvotes: 82

dale
dale

Reputation: 758

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

Upvotes: -3

Yvo
Yvo

Reputation: 19273

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)

Upvotes: 30

James Lawruk
James Lawruk

Reputation: 31383

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.

Upvotes: 312

Related Questions