Почему input не всегда доступен?

Question

1ax @1ax

HTML
CSS

Почему input не всегда доступен?

есть таблица с input в ячейках

<table class="tableInput center">
    <thead>
         <tr>
              <td rowspan="2" class="tableInput center">1</td>
               <td rowspan="2" class="tableInput center">2</td>
                <td colspan="2" class="tableInput center">3</td>
             </tr>
             <tr>
                <td class="tableInput center">кВА</td>
                <td class="tableInput center">кВт</td>
             </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="tableInput"><input class="intab" id="t11" name="t11" value="[[!+fi.t11]]" /></td>
                            <td class="tableInput"><input class="intab" id="t12" name="t12" value="[[!+fi.t12]]" /></td>
                            <td class="tableInput"><input class="intab" id="t13" name="t13" value="[[!+fi.t13]]" /></td>
                            <td class="tableInput"><input class="intab" id="t14" name="t14" value="[[!+fi.t14]]" /></td>
                        </tr>
                        <tr>
                            <td class="tableInput"><input class="intab" id="t21" name="t21" value="[[!+fi.t21]]" /></td>
                            <td class="tableInput"><input class="intab" id="t22" name="t22" value="[[!+fi.t22]]" /></td>
                            <td class="tableInput"><input class="intab" id="t23" name="t23" value="[[!+fi.t23]]" /></td>
                            <td class="tableInput"><input class="intab" id="t24" name="t24" value="[[!+fi.t24]]" /></td>
                        </tr>
                        <tr>
                            <td class="tableInput"><input class="intab" id="t31" name="t31" value="[[!+fi.t31]]" /></td>
                            <td class="tableInput"><input class="intab" id="t32" name="t32" value="[[!+fi.t32]]" /></td>
                            <td class="tableInput"><input class="intab" id="t33" name="t33" value="[[!+fi.t33]]" /></td>
                            <td class="tableInput"><input class="intab" id="t34" name="t34" value="[[!+fi.t34]]" /></td>
                        </tr>
                        <tr>
                            <td class="tableInput"><input class="intab" id="t41" name="t41" value="[[!+fi.t41]]" /></td>
                            <td class="tableInput"><input class="intab" id="t42" name="t42" value="[[!+fi.t42]]" /></td>
                            <td class="tableInput"><input class="intab" id="t43" name="t43" value="[[!+fi.t43]]" /></td>
                            <td class="tableInput"><input class="intab" id="t44" name="t44" value="[[!+fi.t44]]" /></td>
                        </tr>
                        <tr>
                            <td class="tableInput"><input class="intab" id="t51" name="t51" value="[[!+fi.t51]]" /></td>
                            <td class="tableInput"><input class="intab" id="t52" name="t52" value="[[!+fi.t52]]" /></td>
                            <td class="tableInput"><input class="intab" id="t53" name="t53" value="[[!+fi.t53]]" /></td>
                            <td class="tableInput"><input class="intab" id="t54" name="t54" value="[[!+fi.t54]]" /></td>
                        </tr>
                    </tbody>
                </table>

.tableInput {
    margin: 0px;
    padding: 0px;
    width: 98%;
    border: 1px;
    border-style: solid;
}
.intab {
    border-width: 0px;
    background: none;
    outline: none;
    padding: 0px;
    height: 30px;
    font-family: monospace;
    text-align: center;
}

Ссылка на пример.

При этом первый столбец почему-то занимает 50% ширины (это некритично, но все же) и курсор и возможность ввода появляется только если кликнуть строго по центру, если чуть влево/вправо - возможности ввода нет, остальные столбцы - без проблем. Можно как-то расширить тот участок по клику на который input станет доступным?