Как применить внутреннюю границу в html таблицах

Question

У меня есть html таблиц, и я хотел бы щелкнуть каждую ячейку и изменить ее классы на outpatient

td, th {
    border: 5px ;
    cursor: pointer;
    padding: 2.5px;*/
    position: relative;
}

.outpatient {
    background-color: rgb(0,255,0);
    border: 5px solid aqua;

}

Когда я попробовал этот класс, результат будет как ниже.

Кажется, граница не свернута, а некоторые ячейки искажены.

https://gyazo.com/a6e5ef991b345934c070ed77d8949305

Я полагаю, это должно быть внутренне граничит с его ячейками.

Как мне это исправить?

Спасибо

Answer 1

Я надеюсь, что вы согласитесь с этим. Спасибо

$(function() {
  $("td").click(function() {
    $(this).addClass('outpatient');
  });
});

td, th {
    border:1px solid #ccc;
    cursor: pointer;
    padding: 2.5px;
    position: relative;
    text-align:center;
    box-sizing:border-box;
}

.outpatient {
    background-color: rgb(0,255,0);
    outline: 3px solid #546565;
    outline-offset: -4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>13</td>
    <td>14</td>
    <td>15</td>
  </tr>
  <tr>
    <td>16</td>
    <td>17</td>
    <td>18</td>
  </tr>
</table>

Answer 2

Вы можете установить стиль td, th box-sizing:border-box, и это сделает границу внутренней, а не внешней. как я понимаю, это то, что вы ищете

Answer 3

установите для ячеек границу 5 пикселей и протестируйте ее сейчас!

td, th {
  border:5px solid transparent;
}