title: Textbox 100% larger than column size it's within
body: <p>Now the problem I'm seeing, table just grows and scrinks based on window size and data within, except for this one input box.  It wants to be larger than the column itself.   The column has no size set limit and the input has a 100% width, but for some reason it wants to be 110% width, so it seems.  100% has always been based on the outside, so padding and borders should only be taken based on specific px when set.  Can someone tell me why and what I have to do to fix it?</p>
  
  <p>I know for you table haters, you want to start telling me how to code this differently, but I like them and they still work better than a CSS display: table, table-row, table-cell.  </p>
  
  <pre><code>.inputWidth {
      width: 100%;
  }
  .textInput {
      border: 5px solid white;
      -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
      -moz-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
      box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
      padding: 5px;
      background: hsl(120, 100%, 80%);
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/bJ2mA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bJ2mA.png" alt="Snapshot of problem"></a></p>