html - Keeping <table> that contains jQuery UI elements inside <div>, in a way that scales -

for final project in client-side web development, created page allows somecompany keep track of inventory. mandated, project, use jquery ui library.

unfortunately, had submit knowing there existed 1 error: <table> overflowing parent container (s).

initially, had no style table, except for:

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

i took @ this, , tried follow advice, got sexy-looking table still overflowed container (s). table, after rolling back, looks like:

i think 1 of reasons problem persists because of (necessary) jquery ui elements in table. html code table, , immediate parent element, this:

<div id="tabledivfirsttab">     <h3 class="demoheaders">employees</h3>     <table id="employeetable">         <thead class="ui-widget-header">             <tr id="titlerow">                 <td>first name</td>                 <td>last name</td>                 <td>password</td>                 <td>e-mail</td>                 <td>phone number</td>                 <td>social security number</td>                 <td>hire date</td>                 <td>role</td>                 <td>department</td>                 <td>actions</td>             </tr>         </thead>         <tbody class="ui-widget-content">             <tr id="1">                 <td>                     <input type="text" name="firstname" value="jill" />                 </td>                 <td>                     <input type="text" name="lastname" value="smith" />                 </td>                 <td>                     <input type="text" name="password" value="html0x436b617373" />                 </td>                 <td>                     <input type="email" name="email" value="jsmith@gmail.com" />                 </td>                 <td>                     <input type="tel" name="phonenumber" value="(317)555-5555" />                 </td>                 <td>                     <input type="text" name="ssn" value="555-55-5555" />                 </td>                 <td>                     <input type="text" name="hiredate" value="12/6/2015" />                     <!-- insert button choosing date? -->                 </td>                 <td>                     <select name="roles">                         <option id="employeeoption" selected>employee</option>                         <option id="salespersonoption">sales</option>                         <option id="receivingoption">receiving</option>                         <option id="inventorymanagementoption">inventory management</option>                         <option id="handleroption">handler</option>                         <option id="manageroption">manager</option>                         <option id="adminoption">admin</option>                     </select>                 </td>                 <td>                     <select name="departments">                         <option id="inbound1option" selected>inbound 1</option>                         <option id="inbound2option">inbound 2</option>                         <option id="inbound3option">inbound 3</option>                         <option id="outbound1option">outbound 1</option>                         <option id="outbound2option">outbound 2</option>                         <option id="outbound3option">outbound 3</option>                         <option id="salesoption">sales</option>                         <option id="inventoryoption">inventory</option>                         <option id="itoption">it</option>                         <option id="managmentoption">management</option>                     </select>                 </td>                 <td>                     <!--                      <ul id="icons" class="ui-widget ui-helper-clearfix">                         <li class="ui-state-default ui-corner-all" title=".ui-icon-trash">                             <span class="ui-icon ui-icon-trash"></span>                         </li>                     </ul>                     -->                     <button class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-trash"></span></button>                 </td>             </tr>         </tbody>     </table> </div> 

the dependencies, in mock version of this, which can load here thus:

<head>     <!-- linking define colors (up 1 level, , in theme) -->     <script src="http://cs.iupui.edu/~miwarren/n341/theme/external/jquery/jquery.js"></script>     <link href="http://cs.iupui.edu/~miwarren/n341/theme/jquery-ui.css" rel="stylesheet" >     <!-- linking setup page -->     <link href="http://cs.iupui.edu/~miwarren/n341/dummyproject/css/index.css" rel="stylesheet">     <!-- providing ui functionality -->     <script type="text/javascript" src="http://cs.iupui.edu/~miwarren/n341/theme/jquery-ui.js"></script>     <!-- functionality page -->     <script type="text/javascript" src="http://cs.iupui.edu/~miwarren/n341/dummyproject/js/dummyindex.js"></script> </head> 

here html tab structure (which contains table):

    <h1>admin page</h1>     <div class="ui-widget">         <p>the employee part of acme corporation website</p>     </div>     <h2 class="demoheaders">admin page options</h2>     <div id="tabs">         <ul>             <li><a href="#tabs-1">view/add employees</a></li>             <li><a href="#tabs-2">view/edit inventory</a></li>             <li><a href="#tabs-3">manage reported items</a></li>         </ul>         <div id="tabs-1">             <div id="tabledivfirsttab">                 <h3 class="demoheaders">employees</h3>                 <table id="employeetable">                     <thead class="ui-widget-header">                         <tr id="titlerow">                             <th>first name</th>                             <th>last name</th>                             <th>password</th>                             <th>e-mail</th>                             <th>phone number</th>                             <th>social security number</th>                             <th>hire date</th>                             <th>role</th>                             <th>department</th>                             <th>actions</th>                         </tr>                     </thead>                     <tbody class="ui-widget-content">                         <tr id="1">                             <td>                                 <input type="text" name="firstname" value="jill" />                             </td>                             <td>                                 <input type="text" name="lastname" value="smith" />                             </td>                             <td>                                 <input type="text" name="password" value="html0x436b617373" />                             </td>                             <td>                                 <input type="email" name="email" value="jsmith@gmail.com" />                             </td>                             <td>                                 <input type="tel" name="phonenumber" value="(317)555-5555" />                             </td>                             <td>                                 <input type="text" name="ssn" value="555-55-5555" />                             </td>                             <td>                                 <input type="text" name="hiredate" value="12/6/2015" />                             <!-- insert button choosing date? -->                             </td>                             <td>                                 <select name="roles">                                     <option id="employeeoption" selected>employee</option>                                     <option id="salespersonoption">sales</option>                                     <option id="receivingoption">receiving</option>                                     <option id="inventorymanagementoption">inventory management</option>                                     <option id="handleroption">handler</option>                                     <option id="manageroption">manager</option>                                     <option id="adminoption">admin</option>                                 </select>                             </td>                             <td>                                 <select name="departments">                                     <option id="inbound1option" selected>inbound 1</option>                                     <option id="inbound2option">inbound 2</option>                                     <option id="inbound3option">inbound 3</option>                                     <option id="outbound1option">outbound 1</option>                                     <option id="outbound2option">outbound 2</option>                                     <option id="outbound3option">outbound 3</option>                                     <option id="salesoption">sales</option>                                     <option id="inventoryoption">inventory</option>                                     <option id="itoption">it</option>                                     <option id="managmentoption">management</option>                                 </select>                             </td>                             <td>                             <!--              <ul id="icons" class="ui-widget ui-helper-clearfix">             <li class="ui-state-default ui-corner-all" title=".ui-icon-trash">             <span class="ui-icon ui-icon-trash"></span>             </li>             </ul>             -->                                 <button class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-trash"></span></button>                             </td>                         </tr>                     </tbody>                 </table>             </div>         </div>         <div id="tabs-2">             <label>some text</label>         </div>         <div id="tabs-3">             <label>more text</label>         </div> 

the dummyindex.js file simply:

$(document).ready( function()  {     // render tabs     $( "#tabs" ).tabs();     // render buttons     $( "button,input[type='submit']" ).button();     // make sure select menu gets rendered jquery ui way     $( "select" ).selectmenu(); }); 

the css have in mock, table, looks like:

table, th, td {     border: 1px solid black;     overflow:hidden;     white-space: nowrap;     text-overflow: ellipsis; } 

note: added of because apparently, had wasn't enough people decided close question. have manually put together, jsfiddle won't load resources on http, odd reason.

here page final project. tell me missing? (i tried setting max-width attribute on table , div parent.)

edit: fixed issue table not staying in tab. problem line:

select { width: 200px; } 

i made more specific, didn't affect table elements, , fixed initial problem. problem still table not staying within tab when resize window

since dealing jquery, suggestion continue use achieve responsive functionality.

while typically try use border-collapse: collapse inside #employeetable table element, or taking step further setting css media query following:

@media , (max-width: 640px){     #employeetable {         display: block;     } } 

the result not neat expect (nor users).

my advice use table reflow jquery mobile libraries. import library project , try implement it.

also remove min-width: 20% input elements inside table, unless have specific reason doing (such having consistent widths among input fields).

let me know if have questions