問題與列寬

在HTML表格上選擇在第一行的項目，第二行是可見（表有2列）。

現在在第二行中，列寬被縮小，並以藍色突出顯示。爲什麼？

一直試圖衝浪幾天，但似乎沒有工作。

如果有人指出什麼是錯的，這將是有幫助的。

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>

來源

2017-06-09 Observer

你有什麼第二列???除了那個日期，我不能在你的html中的任何列。 –

是什麼問題？我可以看到兩列「選擇日期」和日期輸入部分 – Nitesh

@JunaidAhmad其關於寬度，編輯答案 – Observer

我在演示鏈接看到的是2列顯示，但雙方1和2顯示了一個又一個，不喜歡錶格單元格。原因是你把顯示屬性阻止。請使用表格行。

替換以下行

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

隨着

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

希望這有助於。

來源

2017-06-09 07:28:46 reza

感謝它工作像魅力:) – Observer

變化顯示值從 '塊' 爲 '表列'

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>

來源

2017-06-09 07:35:59

回答

相關問題