100% Width Table Overflowing Div Container

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.

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 & Div not exactly the same size

The table width: 100% has a width which is rounded when 100% equals to something like 450.5 pixels while the div just take the full size no matter what without rounding so just putting : display: table on the div fixed the problem.

Table Width 100% with Overflow Scroll

You can't do it by changing display alone for the table, but there are a couple of ways you can achieve this.

1. Add a "scrolling" container div

You can up the standard table in a container div and give it the overflow: auto;, so it will have the scroll bar.

table          { width: 100%; }
.scrollwrapper { overflow: auto; }

This means the table will stretch to at least 100% of the width even if it is not wide enough on its own, and if the content makes it wider than 100% them the div gets a scrollbar.

Working Example:

table {
  width: 100%;
  border: 1px solid blue;
}

.scrollwrapper {
  overflow: auto;
}

td {
  border: 1px solid #aaa;
}

<h3>Scrolling Wrapper - Wide Table</h3>

<div class="scrollwrapper">
  <table>
    <tr>
      <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
      <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
      <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
    </tr>
    <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
    </tr>
  </table>
</div>

<h3>Scrolling Wrapper - Narrow Table</h3>

<div class="scrollwrapper">
  <table>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
    </tr>
    <tr>
      <td>Short text</td>
      <td>Short text</td>
      <td>Short text</td>
    </tr>
  </table>
</div>

Scrollable table cells within a 100% height and 100% width table

You will either need the content to scroll
overflow: scroll, or be hidden overflow: hidden.

But first you need to make a container inside your table cell that has position absolute, you can then position it left:0;top:0;right:0;bottom:0 to take the container size, this prevent's the TD expanding the cell. Also make sure the TD is set to position relative, as absolute position will then be relative to the TD.

example below..

const tds = document.querySelectorAll('td div');

tds[0].innerText = '123';
tds[1].innerText = JSON.stringify(document, null, '  ');
tds[2].innerHTML = '<b>Hello</b><p>There</p>';
tds[3].innerText = JSON.stringify(
  new Array(100).fill(0)
,null, '  ');

body {
  margin: 0;
  padding: 0;
}
table {
  width: 100%;
  height: 100vh;
}
td {
  position: relative;
  border: 2px solid black;
}
div {
  white-space: pre;
  position: absolute;
  background-color: lightgreen;
  top: 0; left: 0; bottom: 0; right: 0;
  overflow: auto;
}

<table>
   <tr>
     <td><div></div></td>
     <td><div style="overflow:hidden"></div></td>
   </tr>
   <tr>
     <td><div></div></td>
     <td><div></div></td>
   </tr>
</table>

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/

How to fit table content inside parent div?

.page {
  z-index: -1;
  display: grid;
  place-items: center;
  position: absolute;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  font-family: 'Ubuntu', sans-serif;
  background: url("../images/technology.jpg") no-repeat center;
}

.page .max-width {
    margin: auto 0;
    padding: 0px 20px;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: center;
  height: 80vh;
  padding: 25px;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 1px 1px 3px black;
}

.table-container {
    width: 100%;
    height: 80vh;
    overflow: auto;
    padding: 50px;
}

.vm-table {
    height: 100%;
}

<div class="page">
      <div class="max-width">
        <div class="content">
            <div clas="table-container">
                <table class="vm-table" border="1">
                    <thead class="vm-table-head">
                        <th class="vm-th">Request ID</th>
                        <th class="vm-th">Instance Name</th>
                        <th class="vm-th">Template</th>
                        <th class="vm-th">IP Address</th>
                        <th class="vm-th">Owner</th>
                        <th class="vm-th">Created</th>
                    </thead>
                   <tbody>
                       {% for vm in virtual_machines %}
                       <tr class="vm-tr">
                           <td class="vm-td">{{ vm.request_id }}</td>
                           <td class="vm-td">vm_mkt_{{ vm.request_id }}_{{ vm.request_id.username }}</td>
                           <td class="vm-td">{{ vm.product_id.realname }}</td>
                           <td class="vm-td">{{ vm.ip }}</td>
                           <td class="vm-td">{{ vm.request_id.username }}</td>
                           <td class="vm-td">{{ vm.created }}</td>
                       </tr>
                       {% endfor %}
                   </tbody>
               </table>
           </div>
        </div>
    </div>
</div>

100% Width Table Overflowing Div Container