Border color transparency applies to table rows

Question

I use opacity parametr for color rgba, and only the last-child element provides the color I want, each other border displays a different color. You can even check it with colorpicker in devtools.

body {
  background-color: black;
}
.content > table {
  width: 100%;
  border-collapse: collapse;
  color: white;
}
.content > table > tbody > tr.topic {
  height: 50px;
  border-bottom: 1px solid rgba(16, 151, 255, 0.41);

}

<div class="content">
        <table>
          <tbody>
            <tr class="topic">
              <td class="topic-title">
                <i class="topic-icon"></i>
                Title
              </td>
              <td class="topic-replies">
                <i class="replies-icon"></i>
                15
              </td>
              <td class="topic-author">
                Name
              </td>
              <td class="topic-timestamp">
                <time>20m.</time>
              </td>
            </tr>
            <tr class="topic">
              <td class="topic-title">
                <i class="topic-icon"></i>
                Title
              </td>
              <td class="topic-replies">
                <i class="replies-icon"></i>
                15
              </td>
              <td class="topic-author">
                Name
              </td>
              <td class="topic-timestamp">
                <time>20m.</time>
              </td>
            </tr>
            <tr class="topic">
              <td class="topic-title">
                <i class="topic-icon"></i>
                Title
              </td>
              <td class="topic-replies">
                <i class="replies-icon"></i>
                15
              </td>
              <td class="topic-author">
                Name
              </td>
              <td class="topic-timestamp">
                <time>20m.</time>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

Run codeHide result

Answer 1

It seems to me a bug in the Chrome browser.

An alternative approach would be to use background-imageinstead border-bottom.

We can use linear-gradient()to achieve the same effect.

.content > table > tbody > tr.topic {
    background-image: linear-gradient(rgba(16, 151, 255, 0.41), rgba(16, 151, 255, 0.41));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 1px;
}

Working demo:

body {
  background-color: black;
}
.content > table {
  width: 100%;
  border-collapse: collapse;
  color: white;
}
.content > table > tbody > tr.topic {
  height: 50px;
  background-image: linear-gradient(rgba(16, 151, 255, 0.41), rgba(16, 151, 255, 0.41));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 1px;
}

<div class="content">
  <table>
    <tbody>
      <tr class="topic">
        <td class="topic-title">
          <i class="topic-icon"></i>
          Title
        </td>
        <td class="topic-replies">
          <i class="replies-icon"></i>
          15
        </td>
        <td class="topic-author">
          Name
        </td>
        <td class="topic-timestamp">
          <time>20m.</time>
        </td>
      </tr>
      <tr class="topic">
        <td class="topic-title">
          <i class="topic-icon"></i>
          Title
        </td>
        <td class="topic-replies">
          <i class="replies-icon"></i>
          15
        </td>
        <td class="topic-author">
          Name
        </td>
        <td class="topic-timestamp">
          <time>20m.</time>
        </td>
      </tr>
      <tr class="topic">
        <td class="topic-title">
          <i class="topic-icon"></i>
          Title
        </td>
        <td class="topic-replies">
          <i class="replies-icon"></i>
          15
        </td>
        <td class="topic-author">
          Name
        </td>
        <td class="topic-timestamp">
          <time>20m.</time>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Run codeHide result

Answer 2

wow is pretty much like webkit, which has problems displaying correctly.

box-shadow :

.content > table > tbody > tr.topic {
  box-shadow: 0px 1px rgba(16, 151, 255, 0.41);
}

Answer 3

This is a known bug (see https://bugs.chromium.org/p/chromium/issues/detail?id=312121 )

Your choice is to either leave the alpha settings as they are, since other browsers should display them correctly and wait for a fix, or just use the rgb values ​​for now.

Or, as Laszlo suggested, use the shadow of the boxes.

Answer 4

Change border color from rbg to hexa

body {
  background-color: black;
}
.content > table {
  width: 100%;
  border-collapse: collapse;
  color: white;
}
.content > table > tbody > tr.topic {
  height: 50px;
  border-bottom: 1px solid #0f97ff;

}

<div class="content">
        <table>
          <tbody>
            <tr class="topic">
              <td class="topic-title">
                <i class="topic-icon"></i>
                Title
              </td>
              <td class="topic-replies">
                <i class="replies-icon"></i>
                15
              </td>
              <td class="topic-author">
                Name
              </td>
              <td class="topic-timestamp">
                <time>20m.</time>
              </td>
            </tr>
            <tr class="topic">
              <td class="topic-title">
                <i class="topic-icon"></i>
                Title
              </td>
              <td class="topic-replies">
                <i class="replies-icon"></i>
                15
              </td>
              <td class="topic-author">
                Name
              </td>
              <td class="topic-timestamp">
                <time>20m.</time>
              </td>
            </tr>
            <tr class="topic">
              <td class="topic-title">
                <i class="topic-icon"></i>
                Title
              </td>
              <td class="topic-replies">
                <i class="replies-icon"></i>
                15
              </td>
              <td class="topic-author">
                Name
              </td>
              <td class="topic-timestamp">
                <time>20m.</time>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

Run codeHide result