javascript - 列宽问题

Question

ISSUE DEMO

在 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 都依次显示，不像表格单元格。原因是您将显示属性设置为阻止。改用表行。

替换下面一行

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

与

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

希望这对您有所帮助。