Как установить разные размеры ТД с входами в них?

Question

Я пытаюсь сделать следующее:

Однако, когда я устанавливаю ширину тд, она никогда не меняется, и я могувыровняйте его только по длине самого длинного поля, как показано ниже:

Что можно сделать для достижения тех же результатов, что и дляизображение выше?

Вот мой код:

                  <table>

            <tr>
                <td class="no-wrap">Via (Jr, Av, Calle, Pje, Etc.):</td>
                <td class="send-right"><input type="text" size="5"></td>
                <td>Nombre Via:</td>
                <td><input type="text" size="25"></td>
                <td>Nro: <input type="text" size="5"></td>
                <td>Interior: <input type="text" size="7"></td>
            </tr>

            <tr>
                <td>Tipo Zona</td>
                <td class="send-right"><input type="text" size="10"></td>
                <td>Nombre Zona:</td>
                <td><input type="text" size="20"></td>
                <td>Referencia:</td>
                <td><input type="text" size="18"></td>
            </tr>

            <tr>
                <td>Departamento</td>
                <td class="send-right"><input type="text" size="15"></td>
                <td>Provincia:</td>
                <td><input type="text" size="20"></td>
                <td>Distrito:</td>
                <td><input type="text" size="18"></td>
            </tr>

        </table>

.send-right {
  text-align: right;
  vertical-align: middle;
}

.no-wrap {
  white-space: nowrap;
}

Answer 1

Вы были почти там! Вы написали text-align: right;, когда это должно было быть text-align: end;