'Unexplained wider border on second table row

I can't work out why the bottom border of the second item is thicker than the others. This happens on Chrome 97 but not on Firefox 94 so it's likely a browser specific problem.

*,
html {
  padding: 0;
  margin: 0;
}

body {
  box-sizing: border-box;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-wrapper {
  height: 100%;
}

.todo-list {
  padding: 20px 20px 0 20px;
}

.todo-list-items {
  border-collapse: collapse;
  width: 100%;
}

.todo-item:not(:last-child) {
  border-bottom: 1px solid #2d7163;
}

.todo-item td {
  padding: 10px 0;
}

.todo-item input {
  margin-left: 20px;
}

.todo-list h1 {
  margin-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">

<body>
  <div class="main-wrapper">
    <main class="todo-list">
      <table class="todo-list-items">

        <tr class="todo-item">

          <td><input type="checkbox" /></td>

          <td class="todo-title">Test</td>
          <td class="todo-desc"></td>
          <td class="todo-due"></td>
        </tr>

        <tr class="todo-item">

          <td><input type="checkbox" /></td>

          <td class="todo-title">Test</td>
          <td class="todo-desc"></td>
          <td class="todo-due"></td>
        </tr>

        <tr class="todo-item">

          <td><input type="checkbox" checked /></td>

          <td class="todo-title">Test</td>
          <td class="todo-desc">A desription</td>
          <td class="todo-due">10/12/2022</td>
        </tr>

        <tr class="todo-item">

          <td><input type="checkbox" /></td>

          <td class="todo-title">Test</td>
          <td class="todo-desc">A desription</td>
          <td class="todo-due"></td>
        </tr>

        <tr class="todo-item">

          <td><input type="checkbox" checked /></td>

          <td class="todo-title">Test</td>
          <td class="todo-desc">A desription</td>
          <td class="todo-due">10/12/2022</td>
        </tr>

      </table>
    </main>
  </div>
</body>

</html>
htmlcssgoogle-chrome


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions