Table's width does not change

Question

I have made a div that contains two table one on top of another.But the problem is that the second table length is fixed ie no matter how much i increase its width its width does not change.

This is my snippet below !

 function delete_row(no) { document.getElementById("row"+no+"").outerHTML=""; } function add_row(no) { document.getElementById('table1').style.display='block'; var data=document.getElementById("row"+no+""); var table=document.getElementById('table1'); var h=data.innerHTML.split("</td>"); var w=h[0]; var index = w.indexOf("width:50%"); var res=w.replace('width:50%','width:1020px'); var res1=res.replace('colspan="1"',''); console.log(table.rows+" "+table.rows.length+" "+res1+" "); var table_len=(table.rows.length); var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'>"+res1+"</td></tr>";; document.getElementById("row"+no+"").outerHTML=""; } 

  table { margin-left: -4%; float: left; clear: left; width: 378px; background: rgba(255,255,255,0.6); } td ,th{ width: 378px; padding:5px; vertical-align:top; } td img{ width: 40px; height: 40px; color: white; } th { font-weight:bold; border:4px solid #333; z-index: 999; background-color: #666666; } td { border:none; border-bottom: 4px solid #333; z-index: 999; } 

  <div class="full-width" style="" id="prof2"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="z-index:0; "> <div class="custom-form"> <div class="text-center bg-form" style="width:110%"> <div class="img-section"> <a href="#" class=" glyphicon glyphicon-remove" style=" float: left;margin-left: 5px" onclick="document.getElementById('prof2').style.display='none';"></a> <h2 style=" font-family: 'Baskerville';color: white">Security Settings</h2> </div> </div> <div class="col-lg-12 col-md-12" style=""> <table border="1" style=" margin-left: -17px;;width: 383px" class="table2" id='table2'> <tbody> <tr id='row1'> <td colspan="1" style=" width:50%;font-size: 30px;font-family: 'Baskerville'"><img src="5K-HD-Wallpapers-download-Desktop-5K-Wallpapers-Background-for-PC-Desktop-Laptop-18.jpg" alt="" />Adeete</td> <td colspan="1" style="width:70%"> <button class=" btn btn-success" style=" width: 80px;height:35px;margin-top: 4px;;" onclick="add_row(1)">ACCEPT</button> <button class=" btn btn-danger" style=" width: 80px;height:35px;margin-left: 5px;;margin-top: 4px;" onclick="delete_row(1)">REJECT</button> </td> </tr> <tr id='row2'> <td colspan="1" style=" width:50%;font-size: 30px;font-family: 'Baskerville'"><img src="5K-HD-Wallpapers-download-Desktop-5K-Wallpapers-Background-for-PC-Desktop-Laptop-18.jpg" alt="" />Akanksha</td> <td colspan="1" style="width:70%"> <button class=" btn btn-success" style=" width: 80px;height:35px;margin-top: 4px;;" onclick="add_row(2)">ACCEPT</button> <button class=" btn btn-danger" style=" width: 80px;height:35px;margin-left: 5px;;margin-top: 4px;" onclick="delete_row(2)">REJECT</button> </td> </tr> <tr id='row3'> <td colspan="1" style=" width: 50%;font-size: 30px;font-family: 'Baskerville'"><img src="5K-HD-Wallpapers-download-Desktop-5K-Wallpapers-Background-for-PC-Desktop-Laptop-18.jpg" alt="" />Saumya</td> <td colspan="1" style="width:70%"> <button class=" btn btn-success" style=" width: 80px;height:35px;margin-top: 4px;;" onclick="add_row(3)">ACCEPT</button> <button class=" btn btn-danger" style=" width: 80px;height:35px;margin-left: 5px;;margin-top: 4px;;margin-top: 4px;" onclick="delete_row(3)">REJECT</button> </td> </tr> <tr> <td colspan="2">That's all</td> </tr> </tbody> </table> </div> <div class="col-lg-12 col-md-12" style="padding-bottom: 20px"> <table border="1" style=" margin-left: -17px;width:1020px;display: none" class="table1" id="table1"> <tbody> <tr> <th style=";width:1020px">Friend Requests Accepted</th> </tr> </tbody> </table> </div> </div> 

Answer 1

 function delete_row(no) { document.getElementById("row"+no+"").outerHTML=""; } function add_row(no) { document.getElementById('table1').style.display='block'; var data=document.getElementById("row"+no+""); var table=document.getElementById('table1'); var h=data.innerHTML.split("</td>"); var w=h[0]; var index = w.indexOf("width:50%"); var res=w.replace('width:50%','width:1020px'); var res1=res.replace('colspan="1"',''); console.log(table.rows+" "+table.rows.length+" "+res1+" "); var table_len=(table.rows.length); var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'>"+res1+"</td></tr>";; document.getElementById("row"+no+"").outerHTML=""; } 

 #table1, #table2 { font-family: 'Baskerville'; border:1px solid #333; font-size: 30px; } #table1 .row, #table2 .row { border-bottom: 1px solid #333; } #table2 .row>div:last-child:not(:first-child) { border-left: 1px solid #333; } #table1 { display: none; } #table2 { } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="full-width" id="prof2"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="custom-form"> <div class="text-center bg-form"> <div class="img-section"> <a href="#" class=" glyphicon glyphicon-remove float-left" style="margin-left: 5px" onclick="document.getElementById('prof2').style.display='none';"></a> <h2 style=" font-family: 'Baskerville';color: white">Security Settings</h2> </div> </div> <div class="col-lg-12 col-md-12" id="table2"> <!-- Start First Row --> <div class="row"> <div class="col-sm-1"> <img src="5K-HD-Wallpapers-download-Desktop-5K-Wallpapers-Background-for-PC-Desktop-Laptop-18.jpg" alt="" /> </div> <div class="col-sm-9"> Adeete </div> <div class="col-sm-2"> <button class=" btn btn-success" onclick="add_row(1)">ACCEPT</button> <button class=" btn btn-danger" onclick="delete_row(1)">REJECT</button> </div> </div> <!-- End First Row --> <!-- Start Second Row --> <div class="row"> <div class="col-sm-1"> <img src="5K-HD-Wallpapers-download-Desktop-5K-Wallpapers-Background-for-PC-Desktop-Laptop-18.jpg" alt="" /> </div> <div class="col-sm-9"> Akanksha </div> <div class="col-sm-2"> <button class=" btn btn-success" onclick="add_row(2)">ACCEPT</button> <button class=" btn btn-danger" onclick="delete_row(2)">REJECT</button> </div> </div> <!-- End Second Row --> <!-- Start Third Row --> <div class="row"> <div class="col-sm-1"> <img src="5K-HD-Wallpapers-download-Desktop-5K-Wallpapers-Background-for-PC-Desktop-Laptop-18.jpg" alt="" /> </div> <div class="col-sm-9"> Saumya </div> <div class="col-sm-2"> <button class=" btn btn-success" onclick="add_row(3)">ACCEPT</button> <button class=" btn btn-danger" onclick="delete_row(3)">REJECT</button> </div> </div> <!-- End Third Row --> <div class="row"> <div class="col-sm-12"> That's all </div> </div> </div> <div class="col-lg-12 col-md-12" id="table1"> <div class="row"> <div class="col-sm-12"> Friend Requests Accepted </div> </div> </div> </div> </div> 

Please for the love of all that is HTML, only control your styles in CSS

 function delete_row(no) { document.getElementById("row"+no+"").outerHTML=""; } function add_row(no) { document.getElementById('table1').style.display='block'; var data=document.getElementById("row"+no+""); var table=document.getElementById('table1'); var h=data.innerHTML.split("</td>"); var w=h[0]; var index = w.indexOf("width:50%"); var res=w.replace('width:50%','width:1020px'); var res1=res.replace('colspan="1"',''); console.log(table.rows+" "+table.rows.length+" "+res1+" "); var table_len=(table.rows.length); var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'>"+res1+"</td></tr>";; document.getElementById("row"+no+"").outerHTML=""; } 

 table { float: left; clear: left; width: 100%; background: rgba(255,255,255,0.6); } td ,th{ padding:5px; vertical-align:top; } td img{ max-width: 40px; height: auto; color: white; } th { font-weight:bold; border:4px solid #333; z-index: 999; background-color: #666666; } td { border:none; border-bottom: 4px solid #333; z-index: 999; } .custom-padding-bottom { padding-bottom: 20px; } #table1 { margin-left: -17px; display: none; } #table1 th { } #table2 { margin-left: -17px; font-family: 'Baskerville'; font-size: 30px; } /* First Cell in Row */ #table2 tr > td:nth-child(1) { width:10%; } /* Second Cell in Row */ #table2 tr > td:nth-child(2) { width:65%; } /* Second Cell in Row */ #table2 tr > td:nth-child(3) { width:25%; } #table2 .btn-success { width: 80px; height:35px; margin-top: 4px; } #table2 .btn-danger { width: 80px; height:35px; margin-left: 5px; margin-top: 4px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="full-width" id="prof2"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="custom-form"> <div class="text-center bg-form"> <div class="img-section"> <a href="#" class=" glyphicon glyphicon-remove float-left" style="margin-left: 5px" onclick="document.getElementById('prof2').style.display='none';"></a> <h2 style=" font-family: 'Baskerville';color: white">Security Settings</h2> </div> </div> <div class="col-lg-12 col-md-12"> <table border="1" class="table2" id='table2'> <tbody> <tr id='row1'> <td colspan="1"><img src="5K-HD-Wallpapers-download-Desktop-5K-Wallpapers-Background-for-PC-Desktop-Laptop-18.jpg" alt="" /></td> <td>Adeete</td> <td colspan="1"> <button class=" btn btn-success" onclick="add_row(1)">ACCEPT</button> <button class=" btn btn-danger" onclick="delete_row(1)">REJECT</button> </td> </tr> <tr id='row2'> <td colspan="1"><img src="5K-HD-Wallpapers-download-Desktop-5K-Wallpapers-Background-for-PC-Desktop-Laptop-18.jpg" alt="" /></td> <td>Akanksha</td> <td colspan="1"> <button class=" btn btn-success" onclick="add_row(2)">ACCEPT</button> <button class=" btn btn-danger" onclick="delete_row(2)">REJECT</button> </td> </tr> <tr id='row3'> <td colspan="1"><img src="5K-HD-Wallpapers-download-Desktop-5K-Wallpapers-Background-for-PC-Desktop-Laptop-18.jpg" alt="" /></td> <td>Saumya</td> <td colspan="1"> <button class=" btn btn-success" onclick="add_row(3)">ACCEPT</button> <button class=" btn btn-danger" onclick="delete_row(3)">REJECT</button> </td> </tr> <tr> <td colspan="3">That's all</td> </tr> </tbody> </table> </div> <div class="col-lg-12 col-md-12 custom-padding-bottom"> <table border="1" class="table1" id="table1"> <tbody> <tr> <th>Friend Requests Accepted</th> </tr> </tbody> </table> </div> </div> 

Answer 2

Try this:

table {
  table-layout: auto;
}

Look at this for reference.