title: Why isnt my table staying in it's div, when resizing my browser?
body: <p>So i build this simple table: <a href="https://i.stack.imgur.com/eqwwv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eqwwv.png" alt="Table before resizing"></a></p>
  
  <p>The Problem is, when i resize my browser to a certain amount, it starts looking like this: </p>
  
  <p><a href="https://i.stack.imgur.com/pPMIk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pPMIk.png" alt="Table when resizing"></a></p>
  
  <p>I already tried to set tablel-layout:fixed. And now it resizes correctly, BUT the insides of the table are completely wrong, as you can see: 
  <a href="https://i.stack.imgur.com/lBFza.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lBFza.png" alt="Table with table-layout:fixed"></a></p>
  
  <p>So now i really have no idea how to solve this problem and where to begin. Anyone has an idea? Here's the code so far: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
    &lt;meta content="width=device-width, initial-scale=1.0"&gt;
    &lt;head&gt;
      &lt;title&gt;TestTable&lt;/title&gt;
      &lt;link rel="stylesheet" href="..//css/GeneralStyle.css"&gt;
      &lt;link rel="stylesheet" href="..//css/RFQ.css"&gt;
      &lt;script src="..//js/RFQ.js"&gt;&lt;/script&gt;
      &lt;meta charset="utf-8" /&gt; 
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id = "content"&gt;
        &lt;div id="main2" class="main"&gt;
          &lt;h1 id="x2" class="x"&gt;X&lt;/h1&gt;
          &lt;h1 class="title" id="T2"&gt;Project specification and target price&lt;/h1&gt;
          &lt;table id="table_021"&gt;
            &lt;tr&gt;
              &lt;th&gt;&lt;b&gt;&lt;/b&gt;&lt;/th&gt;
              &lt;th&gt;&lt;b&gt;Product Code&lt;/b&gt;&lt;/th&gt;
              &lt;th&gt;&lt;b&gt;Extra Options&lt;/b&gt;&lt;/th&gt;
              &lt;th&gt;&lt;b&gt;Quantity&lt;/b&gt;&lt;/th&gt;
              &lt;th&gt;&lt;b&gt;Expected Offer Price (incl. Accessories)&lt;/b&gt;&lt;/th&gt;
              &lt;th&gt;&lt;b&gt;Currency&lt;/b&gt;&lt;/th&gt;
              &lt;th&gt;&lt;b&gt;Customer price &lt;/b&gt;&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;&lt;b&gt;Code1&lt;/b&gt; &lt;/td&gt;
              &lt;td style="width: 40%"&gt;
                &lt;table style="width: 400px; margin-left: 0;"&gt;
                  &lt;tr&gt;
                    &lt;td&gt;XXX&lt;/td&gt;
                    &lt;td style="width: 17%"&gt;&lt;input maxlength="4"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;-&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;-&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;-Y&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;table style="width: 180px; margin-left: 0;"&gt;
                  &lt;tr&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;input id="a2" type="number" min="0"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input id="a3" type="number" min="0"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;select name="currency1" id="currency1"&gt;
                &lt;option value="1"&gt;Euro € &lt;/option&gt;
                &lt;option value="2"&gt;USD $ &lt;/option&gt;
              &lt;/select&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input id="a4" type="number" min="0"&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;&lt;b&gt;Code2&lt;/b&gt;&lt;/td&gt;
              &lt;td style="width: 40%"&gt;
                &lt;table style="width: 400px; margin-left: 0;"&gt;
                  &lt;tr&gt;
                    &lt;td&gt;XXX&lt;/td&gt;
                    &lt;td style="width: 17%"&gt;&lt;input maxlength="4"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;-&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;-&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;-Y&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
              &lt;/td&gt;
              &lt;td style="width: 18%"&gt;
                &lt;table style="width: 180px; margin-left: 0;"&gt;
                  &lt;tr&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;input id="a6" type="number" min="0"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input id="a7" type="number" min="0"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;select name="currency2" id="currency2"&gt;
                &lt;option value="1"&gt;Euro € &lt;/option&gt;
                &lt;option value="2"&gt;USD $ &lt;/option&gt;
              &lt;/select&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input id="a8" type="number" min="0"&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;&lt;b&gt;Code3&lt;/b&gt;&lt;/td&gt;
              &lt;td style="width: 40%"&gt;
                &lt;table style="width: 400px; margin-left: 0;"&gt;
                  &lt;tr&gt;
                    &lt;td&gt;XXX&lt;/td&gt;
                    &lt;td style="width: 17%"&gt;&lt;input maxlength="4"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;-&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;-&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;-Y&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;table style="width: 180px; margin-left: 0;"&gt;
                  &lt;tr&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
              &lt;/td&gt;
              &lt;!--&lt;td&gt;&lt;form id="aa9"&gt;&lt;input id="a9" type="text"&gt;&lt;/input&gt;&lt;/form&gt;&lt;/td&gt;--&gt;
              &lt;td&gt;&lt;input id="a10" type="number" min="0"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input id="a11" type="number" min="0"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;select name="currency3" id="currency3"&gt;
                &lt;option value="1"&gt;Euro € &lt;/option&gt;
                &lt;option value="2"&gt;USD $ &lt;/option&gt;
              &lt;/select&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input id="a12" type="number" min="0"&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;&lt;b&gt;Code4&lt;/b&gt;&lt;/td&gt;
              &lt;td style="width: 40%"&gt;
                &lt;table style="width: 400px; margin-left: 0;"&gt;
                  &lt;tr&gt;
                    &lt;td&gt;XXX&lt;/td&gt;
                    &lt;td style="width: 17%"&gt;&lt;input maxlength="4"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;-&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;-&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;&lt;input maxlength="1"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td style="width: 8%"&gt;-Y&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;table style="width: 180px; margin-left: 0;"&gt;
                  &lt;tr&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input maxlength="3"&gt;&lt;/input&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
              &lt;/td&gt;
              &lt;!--&lt;td&gt;&lt;form id="aa13"&gt;&lt;input id="a13" type="text"&gt;&lt;/input&gt;&lt;/form&gt;&lt;/td&gt;--&gt;
              &lt;td&gt;&lt;input id="a14" type="number" min="0"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input id="a15" type="number" min="0"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;select name="currency4" id="currency4"&gt;
                &lt;option value="1"&gt;Euro € &lt;/option&gt;
                &lt;option value="2"&gt;USD $ &lt;/option&gt;
              &lt;/select&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input id="a16" type="number" min="0"&gt;&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
          &lt;br&gt;
          &lt;button id="c2" class="c next Button" onclick="check2()"&gt;Check and transmit&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>table {
    width: 80%;
    border-collapse: collapse;
    color: gray;
    margin-left: 5%;
  }
  th, td {
    border: 1px solid #ddd;
    opacity:0.9;
    text-align: center;
    padding: 5px;
  }
  th {
    background-color: white;
  }
  .main {
    float: left;
    width: 75%;
    margin-top: 1%;
    border-radius: 5px;
    background-color: #ffffff;
    margin-left: 2%;
  }
  .in {
    font-size: 120%;
    text-align: right;
    width: 80%;
  }
  #profit, .title {
    color: gray;
    padding-left: 2%;
  }
  .x {
    color: gray;
    float: right;
    margin-right: 3%;
  }
  .x, .title:hover {
    cursor: pointer;
  }
  form  {
    margin:0;
  }
  #newmain {
    margin-top: 180px;
    background-color: white;
  }
  #optional {
    display: none;
  }
  #x1 {
    display: block;
  }
  .c {
    float: right;
  }
  .overlay-content {
    top: 2%;
  }
  #cmd {
    float: right;
    margin-top: 180px;
    margin-left: 80%;
    position: fixed;
  }
  /* did not work out 
  #table_021{
  table-layout:fixed; 
  }
  */
  .transmitsuccess {
    color:green;
  }
  </code></pre>