列宽问题

Question

问题演示

在HTML表格中,在第一行中选择项目时,第二行变为可见(表格有2列).

现在在第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>

Answer 1

我在演示链接中看到的是2列显示但是1和2一个接一个地显示,而不是像表格单元格.原因是你将display属性设置为阻止.请改用表格行.

替换以下行

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

同

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

希望这可以帮助.