How to apply inner border in html tables

user_6724844 0
Viewed 55

I have html tables,and I would like to click each cells and change it's classes to outpatient

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

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

}

When I tried this class the result is like below.

It seems border is not collapsed and some cells are distorted.

https://gyazo.com/a6e5ef991b345934c070ed77d8949305

I guess it must be inner bordered to it's cells.

How can I fix it?

Thanks

css html javascript
3 Answers

You can set to the td, th style box-sizing:border-box and it will make the border to be in the inner width, and not the outer. as I understand, it is what you looking for

user_85087770

I hope that you will agree with it. Thanks

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

user_122192830

set a 5px border for cells and test it now!

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

user_75530710
Related