Tabelle Breite ändert sich nicht

Ich habe ein div gemacht, das zwei Tabelle eine über einander enthält.Aber das Problem ist, dass die zweite Tabelle Länge ist behoben, d. H. Egal, wie viel ich seine Breite seine Breite ändert sich nicht.Tabelle Breite ändert sich nicht

Dies ist mein Ausschnitt unten!

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>

Quelle

2017-04-07 ani

Ihre zweite Tabelle hat Inline-Stil Breite: 1020px ,,, Ändern/Entfernen, wenn Sie es brauchen ... und Sie haben sehr chaotisch Code –

, dass die question.Even ist nach dem Ändern oder es passiert nichts – ani

Ihre Zeile löschen entfernen Methode ist ziemlich schlecht. 'var elem = dokument.getElementById (id); elem.parentNode.removeChild (elem); ' – epascarello

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>

Bitte für die Liebe, dass alle HTML ist, nur Ihre Stile in CSS steuern

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>

Quelle

2017-04-07 22:35:14 JohnV

immer noch das gleiche Ergebnis; – ani

Ich entfernte alle Stilelemente aus dem HTML-Code und modifizierte die CSS – ani

Das gleiche Ergebnis. Jetzt ist alles nicht richtig ausgerichtet – ani

Versuchen Sie folgendes:

table { 
    table-layout: auto; 
}

Blick auf this Referenz.

Quelle

2017-04-08 00:48:58

Tabelle Breite ändert sich nicht

Antwort

Verwandte Themen