1. 首頁
  2. 問答
  3. 表格的寬度不變

表格的寬度不變

2017-04-07 75 views
0

我做了一個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>

來源

2017-04-07 ani

+0

你的第二張桌子有內嵌樣式寬度：1020px ,,,更改/刪除，如果你需要它...而你有非常混亂的代碼 –

+0

這是問題。即使更改或刪除它沒有任何反應 – ani

+0

您的刪除行方法很糟糕。 'var elem = document.getElementById（id）; elem.parentNode.removeChild（elem）;' – epascarello

回答

0 

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>

來源

2017-04-07 22:35:14 JohnV

+0

仍然得到相同的結果; – ani

+0

我從html代碼中刪除了所有樣式元素，並修改了css – ani

+0

結果相同。現在一切都沒有正確對齊 – ani

0

試試這個：

table { 
    table-layout: auto; 
}

看this以供參考。

來源

2017-04-08 00:48:58

相關問題

 相關問題