Table Overflows Parent Div When Td Content Is Too Wide

Table overflows parent div when td content is too wide

Same answer as another very recent topic:table-layout:fixed; + width. DEMO

table {
    table-layout:fixed;
    width:100%;
}
td {
    border: 1px solid black;
    overflow:hidden;/* optionnal*/
}
#firsttd {
    white-space: nowrap;
}

---

edit : about comment below :

@MatthieuRiegler

table-layout:fixed; is bad if you want cell with different width.

here is a demo where table-layout and cell's width can be different:

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

table,
td,
th {
  border: 1px solid;
}

thead tr th:nth-child(1) {
  width: 5em;
}

thead tr th:nth-child(2) {
  width: 20%;
}

thead tr th:nth-child(3) {
  width: 7.5em;
}

<table>
  <thead>
    <tr>
      <th>Head Cell</th>
      <th>Head Cell</th>
      <th>Head Cell</th>
      <th>Head Cell</th>
      <th>Head-Cell-Text</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

Prevent table from overflowing parent container

You just have to add overflow-x: auto and everything works fine

#container {
  ...
  overflow-x: auto;
}

main {
  display: flex;
  flex: 1;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}

main nav {
  background: red;
  min-width: 200px;
}

#search {
  background: purple;
}

#container {
  background: blue;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-x: auto;
}

#container nav {
  background: orange;
}

.portlet {
  background: yellow;
}

.p-main {
  overflow-x: auto;
  max-width: 100%;
}

table {
  background: green;
  width: 600px;
  border: 3px solid red;
}

<main>
  <nav>Nav</nav>
  <div id="container">
    <div id="search">Search</div>
    <div class="portlet">
      <div class="p-head">Head</div>
      <div class="p-main">
        <table>
          <tr>
            <td>ASDF</td>
            <td>ASDF</td>
            <td>ASDF</td>
            <td>ASDF</td>
            <tr>
              <td>ASDF</td>
              <td>ASDF</td>
              <td>ASDF</td>
              <td>ASDF</td>
              <tr>
                <td>ASDF</td>
                <td>ASDF</td>
                <td>ASDF</td>
                <td>ASDF</td>
                <tr>
                  <td>ASDF</td>
                  <td>ASDF</td>
                  <td>ASDF</td>
                  <td>ASDF</td>
                  <tr>
                    <td>ASDF</td>
                    <td>ASDF</td>
                    <td>ASDF</td>
                    <td>ASDF</td>
        </table>
      </div>
      <div class="p-foot">Foot</div>
    </div>
  </div>
</main>

Table is using more than 100% width of its parent element, how can this be fixed by CSS only?

You should give word-break: break-word; for td text , because the text is a large length, or you can give td text as word-break: break-all; for breaking the text.

updated css code

#wrapper table td{
  word-break: break-word;
}

demo fiddle: https://jsfiddle.net/nikhilvkd/kLt1mec8/3/

Table overflowing outside of 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)

100% width table overflowing div container

From a purely "make it fit in the div" perspective, add the following to your table class (jsfiddle):

table-layout: fixed;
width: 100%;

Set your column widths as desired; otherwise, the fixed layout algorithm will distribute the table width evenly across your columns.

For quick reference, here are the table layout algorithms, emphasis mine:

• Fixed (source)

  With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

• Automatic (source)

  In this algorithm (which generally requires no more than two passes), the table's width is given by the width of its columns [, as determined by content] (and intervening borders).
  
  [...] This algorithm may be inefficient since it requires the user agent to have access to all the content in the table before determining the final layout and may demand more than one pass.

Click through to the source documentation to see the specifics for each algorithm.

CSS table width 100% and td overflow hidden with no td width

I do not know if this is what you want but here it is.

https://jsfiddle.net/Tanikimura/4vypvwcn/

Apply text-overflow to a p tag.

table{  width:100%;}td { max-width: 150px !important;  }td p{  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;      padding: 3px 5px;}

<div style="width:400px;display:block;"><table>  <tr>    <td>one</td><td>two</td><td>three</td>  </tr>  <tr>    <td><p>this is a very very long text to show what i want to achieve</p></td><td>two</td><td>three</td>  </tr></table></div>

---

Related Topics