如何在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

我猜测它必须内部边框到其单元格。

我该如何修复它？

谢谢

- Heisenberg

Answer 1

你可以将的样式设置为box-sizing:border-box，这会使边框处于内部宽度而不是外部。据我了解，这正是你要寻找的。

- Yosef Tukachinsky

Answer 2

我希望你能同意这个。谢谢。

$(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>

- alirizvi19

Answer 3

为单元格设置5像素的边框，现在进行测试！

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

- Yasaman.Mansouri