Question

这是我的代码。问题是：当我单击td单元格时，向其添加边框，边框使表格更改大小。

由于某些原因，我不希望在向td标签添加边框时增加表格的大小，并且我不能在CSS中使用大纲。

我试图添加以下这行CSS代码： box-sizing：border-box; ，但它似乎不起作用。

谢谢你的想法！

Array.prototype.forEach.call(
  document.querySelectorAll('td'),
  function(td) {
    td.addEventListener('click', function(e) {
      e.target.classList.add('myBorder')
    })
  })

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  box-sizing: border-box;
}
.myBorder {
  border: 2px solid #4b89ff;
}

<table>
  <thead>
    <tr>
      <th>id</th>
      <th>Name</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Bob</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Anna</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Christ</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>

Answer 1

用Chrome检查 td ，我发现将类添加到单元格中也会产生1px的填充。而且，如果您在.myBorder类上设置padding-bottom: 0px;将会解决此问题。

Array.prototype.forEach.call(
  document.querySelectorAll('td'),
  function(td) {
    td.addEventListener('click', function(e) {
      e.target.classList.add('myBorder')
    })
  })

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
}
.myBorder {
  border: 2px solid #4b89ff;
  padding-bottom: 0px;
}

<table>
  <thead>
    <tr>
      <th>id</th>
      <th>Name</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Bob</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Anna</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Christ</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>

在将边框添加到特定单元格时防止表调整大小

1 个答案: