javascript - 表格宽度不变

Question

我做了一个包含两个表格的 div，一个在另一个之上。但问题是第二个表格的长度是固定的，即无论我增加多少它的宽度，它的宽度都不会改变。

下面是我的代码片段!

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>

为了所有 HTML 的爱，请只在 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>