выделение границ строк таблицы

Question

Имеется данный код для таблицы.

#table3 {
  font-family: Calibri, Helvetica, sans-serif;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0px;
}

<table id="table3">
  <tbody>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th></th>
    </tr>
    <tr style="border: 3px solid #EFEFEF;">
      <td>111111111111</td>
      <td>hours2</td>
      <td>105 hours</td>
      <td>
        <input type="submit" class="common-but" value="Null">
      </td>
    </tr>
    <tr style="border: 3px solid #EFEFEF;">
      <td>111111111111</td>
      <td>hours</td>
      <td>100 hours</td>
      <td>
        <input type="submit" class="common-but" value="Null">
      </td>
    </tr>
    <tr style="border: 3px solid #FD9E1E;">
      <td>aaaaaaaaaaaa</td>
      <td>Generator</td>
      <td>0 hours</td>
      <td>
        <input type="submit" class="common-but" value="Null">
      </td>
    </tr>
    <tr style="border: 3px solid #FD9E1E;">
      <td>aaaaaaaaaaaa</td>
      <td>Burner</td>
      <td>0 hours</td>
      <td>
        <input type="submit" class="common-but" value="Null">
      </td>
    </tr>
    <tr style="border: 3px solid #D92231;">
      <td>aaaaaaaaaaaa</td>
      <td>Pump</td>
      <td>1000 hours </td>
      <td>
        <input type="submit" class="common-but" value="Null">
      </td>
    </tr>
    <tr style="border: 3px solid #EFEFEF;">
      <td>abababababab</td>
      <td>hours</td>
      <td>100 hours</td>
      <td>
        <form action="" method="post">
          <input type="submit" class="common-but" value="Null">
      </td>
    </tr>
    <tr style="border: 3px solid #EFEFEF;">
      <td>abababababab</td>
      <td>hours2</td>
      <td>200 hours</td>
      <td>
        <input type="submit" class="common-but" value="Null">
      </td>
    </tr>

  </tbody>
</table>

При исполнении можно увидеть, что цветные выделения строк наплывают друг на друга. Как избавиться от этого? Чтобы нужная строка подсвечивалась нужным цветом.

Что пробовал:

менял border-collapse: separate;
устанавливал border-spacing: 3px 3px

при данных установках границы пропадают совсем.

Answer 1

Используйте box-shadow: inset ...:

#table3 {
  font-family: Calibri, Helvetica, sans-serif;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0px;
}

<table id="table3">
  <tbody>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th></th>
    </tr>
    <tr style="box-shadow: inset 0 0 0 3px #EFEFEF;">
      <td>111111111111</td>
      <td>hours2</td>
      <td>105 hours</td>
      <td>
        <input type="submit" class="common-but" value="Null">
      </td>
    </tr>
    <tr style="box-shadow: inset 0 0 0 3px #EFEFEF;">
      <td>111111111111</td>
      <td>hours</td>
      <td>100 hours</td>
      <td>
        <input type="submit" class="common-but" value="Null">
      </td>
    </tr>
    <tr style="box-shadow: inset 0 0 0 3px #FD9E1E;">
      <td>aaaaaaaaaaaa</td>
      <td>Generator</td>
      <td>0 hours</td>
      <td>
        <input type="submit" class="common-but" value="Null">
      </td>
    </tr>
    <tr style="box-shadow: inset 0 0 0 3px #FD9E1E;">
      <td>aaaaaaaaaaaa</td>
      <td>Burner</td>
      <td>0 hours</td>
      <td>
        <input type="submit" class="common-but" value="Null">
      </td>
    </tr>
    <tr style="box-shadow: inset 0 0 0 3px #D92231;">
      <td>aaaaaaaaaaaa</td>
      <td>Pump</td>
      <td>1000 hours </td>
      <td>
        <input type="submit" class="common-but" value="Null">
      </td>
    </tr>
    <tr style="box-shadow: inset 0 0 0 3px #EFEFEF;">
      <td>abababababab</td>
      <td>hours</td>
      <td>100 hours</td>
      <td>
        <form action="" method="post">
          <input type="submit" class="common-but" value="Null">
      </td>
    </tr>
    <tr style="box-shadow: inset 0 0 0 3px #EFEFEF;">
      <td>abababababab</td>
      <td>hours2</td>
      <td>200 hours</td>
      <td>
        <input type="submit" class="common-but" value="Null">
      </td>
    </tr>

  </tbody>
</table>

БЛОГ НА HUSL

выделение границ строк таблицы

Ответы (1 шт):