javascript - Overflow of a table hidden? -

what i'm trying here create table javascript (success) in div max width of 300px.

now if table wider 300px want overflow hidden, happens table scales width down 300px each time though setting <td> different width:

<style> #tablespace { margin:auto; position:relative; width:300px; overflow:hidden;     } </style>  <button onclick="createtable()" >try it</button> <div id="tablespace">    <p id="tablespace"> </p> </div>  <script> function createtable() {     var tablecontents = "";     tablecontents = "<table border=1>"; //number of rows (var = 0; < 3; ++) {  tablecontents += "<tr>"; //number of columns     (var = 0; < 5; ++)     {       tablecontents += "<td height= 50, width= 100>" + + "</td>";           }     tablecontents += "</tr>"; } tablecontents += "</table>"; document.getelementbyid("tablespace").innerhtml = tablecontents; } </script> 

so have used height of cell 50px , width of 100px because max width of div 300px, should see 2 , half cells rest hidden not case.

i understand basic mistake have no clue.

try change (i don't know whether in code):

tablecontents += "<td height= 50, width= 100>" + + "</td>"; 

to

tablecontents += '<td height="50px", width="100px">' + + "</td>"; 

btw recommend skip thes html3 parameters , seperate css class like

tablecontents += '<td class='croppedtable'>' + + "</td>"; 

and

<style> #tablespace { margin:auto; position:relative; width:300px; overflow:hidden;     }  .croppedtable { ... styles ... } .croppedtable td { ... additional styles ... width: 100px; height: 50px;  } </style>