Ширина таблицы неожиданно меняется при применении colspan к одной из его ячеек - PullRequest
Новая
       0

Ширина таблицы неожиданно меняется при применении colspan к одной из его ячеек

0 голосов
/ 13 января 2020

Я хочу выяснить, почему размер моей таблицы неожиданно изменяется при применении colspan к одной из ячеек, как указано в текстовом поле ниже:

Example screenshot

td {
  border: 1px solid navy;
}

table {
  margin-left: auto;
  margin-right: auto;
  font-family: arial;
  color: #fff5cc;
  margin-top: 100px;
  background-color: red;
}
<form method="post" action="" onsubmit="return ValidateForm()">
  <table border="1" id="tbl">
    <tr>
      <td colspan="2">Registration No:</td>
      <td colspan="2"><input type="text" name="mid" id="mid" class="txtBx" value="" readonly/></td>
    </tr>
    <tr>
      <td>Payable Month(s):</td>
      <td><input type="text" id="" class="txtBx" /></td>
      <td>Days(s):</td>
      <td><input type="text" id="" class="txtBx" /></td>
    </tr>
    <tr>
      <td colspan="2">Arrears(Rs):</td>
      <td><input type="text" id="arrear" class="txtBx" /></td>
    </tr>
    <tr>
      <td><input type="submit" name="sbmit" id="sbmit" value="Confirm" /></td>
    </tr>
  </table>
</form>

Но, когда я применяю кольспан, это выглядит так:

Example screenshot 2

Внесены изменения в код: 

<tr>
  <td colspan="2">Arrears(Rs):</td>
  <td colspan="2"><input type="text" id="arrear" class="txtBx" /></td>
</tr>

Почему ячейка, содержащая Дни (и), уменьшается, а ширина таблицы уменьшается?

...