Problem mit Spaltenbreite

Question

ISSUE DEMO

In HTML-Tabelle, bei der Auswahl eines Postens in der 1. Reihe, 2. Reihe sichtbar gemacht wird (Tabelle hat zwei Spalten).

Jetzt hier in der zweiten Zeile wird die Spaltenbreite verkleinert, die blau markiert ist. Warum ist das so?

Habe versucht, für ein paar Tage zu surfen, aber keiner scheint zu arbeiten.

Es wäre hilfreich, wenn jemand darauf hinweisen würde, was falsch ist.

function showDiv(select){ 
 
    if(select.value==2){ 
 
    document.getElementById('future_date').style.display = "block"; 
 
    } else{ 
 
     document.getElementById('future_date').style.display = "none"; 
 
    } 
 
}

.table1 { 
 
    color: #2a2929; 
 
    padding-top: 20px; 
 
    margin-bottom: 7px; 
 
    text-align: center; 
 
} 
 

 
.col-md-12 { 
 
    width: 100%; 
 
} 
 

 
.table1 table { 
 
    width: 100%; 
 
    text-align: center; 
 
    padding: 10px; 
 
    background-color: grey; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    margin-top: 25px; 
 
} 
 

 
.table-text-filed{ 
 
    width:100%; 
 
    border:1px solid #d4d5d7; 
 
    color:#2a2929; 
 
    text-align: center; 
 
} 
 

 
.body { 
 
    color: #fff; 
 
    font-size: 18px; 
 
    line-height: 23px; 
 
    font-family: calibri; 
 
} 
 

 
.table1 td { 
 
    padding: 5px; 
 
    background-color: white; 
 
} 
 

 
.table1 tr { 
 
    padding: 5px; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="col-md-12 table1"> 
 
    <table border="1"> 
 
    <tr> 
 
     <td col width="40%">Type</td> 
 
     <td> 
 
      <select name="token_date_id" onchange="showDiv(this)" class="table-text-filed" required> 
 
       <option value="1">Today</option> 
 
       <option value="2">Future Date</option> 
 
      </select> 
 
     </td> 
 
    </tr> 
 
    <tr id="future_date" style="display:none"> 
 
     <td col width="40%">Select Date</td> 
 
     <td> 
 
      <input type="date" name="token_date" value="" class="table-text-filed" data-date='{"startView": 2}'> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 1

Was ich in der Demo-Link sah 2 Spalte zeigt aber beide 1 und 2 nacheinander angezeigt, nicht Tabellenzelle mögen. Der Grund ist, dass Sie die Anzeigeeigenschaft blockieren. Verwenden Sie stattdessen Tabellenzeile.

Ersetzen Sie die folgende Zeile

document.getElementById('future_date').style.display = "block"; 

Mit

document.getElementById('future_date').style.display = "table-row"; 

Hoffnung, das hilft.

Answer 2

Änderungsanzeigewert von 'Block' zu 'table-Zeile'

function showDiv(select){ 
 
    if(select.value==2){ 
 
    document.getElementById('future_date').style.display = "table-row"; 
 
    } else{ 
 
     document.getElementById('future_date').style.display = "none"; 
 
    } 
 
}

.table1 { 
 
    color: #2a2929; 
 
    padding-top: 20px; 
 
    margin-bottom: 7px; 
 
    text-align: center; 
 
} 
 

 
.col-md-12 { 
 
    width: 100%; 
 
} 
 

 
.table1 table { 
 
    width: 100%; 
 
    text-align: center; 
 
    padding: 10px; 
 
    background-color: grey; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    margin-top: 25px; 
 
} 
 

 
.table-text-filed{ 
 
    width:100%; 
 
    border:1px solid #d4d5d7; 
 
    color:#2a2929; 
 
    text-align: center; 
 
} 
 

 
.body { 
 
    color: #fff; 
 
    font-size: 18px; 
 
    line-height: 23px; 
 
    font-family: calibri; 
 
} 
 

 
.table1 td { 
 
    padding: 5px; 
 
    background-color: white; 
 
} 
 

 
.table1 tr { 
 
    padding: 5px; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="col-md-12 table1"> 
 
    <table border="1"> 
 
    <tr> 
 
     <td col width="40%">Type</td> 
 
     <td> 
 
      <select name="token_date_id" onchange="showDiv(this)" class="table-text-filed" required> 
 
       <option value="1">Today</option> 
 
       <option value="2">Future Date</option> 
 
      </select> 
 
     </td> 
 
    </tr> 
 
    <tr id="future_date" style="display:none"> 
 
     <td col width="40%">Select Date</td> 
 
     <td> 
 
      <input type="date" name="token_date" value="" class="table-text-filed" data-date='{"startView": 2}'> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>