Stacks icon indicating copy to clipboard operation
Stacks copied to clipboard

Outer border disappears when hiding outer columns in an s-table__bx table

Open aalear opened this issue 6 years ago • 2 comments

Describe the bug Hiding the first or the last column in a table with only horizontal borders (.s-table__bx) via sm:d-none results in the outer border of the table going AWOL on the corresponding side.

To Reproduce Markup:

<table class="s-table s-table__bx">
      <thead>
          <tr>
              <th scope="col" class="sm:d-none">Something</th>
              <th scope="col">Another</th>
              <th scope="col">Thing</th>
              <th scope="col">Testing</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td class="sm:d-none">Hello</td>
              <td>Goodbye</td>
              <td>Maybe</td>
              <td>Wat</td>
          </tr>
      </tbody>
</table>

Toss that into a CodePen or similar, and then resize the window down.

Expected behavior The outer table border should not disappear.

Screenshots Before resizing: image

After resizing: image

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Chrome
  • Version 75.0.3770.142

Additional context The workaround is to add the sm:bl bc-black-3 brw0 classes to the second column of the table (blw0 for the penultimate column).

aalear avatar Jul 29 '19 22:07 aalear

This issue also applies to rows as well. I'm not sure how we can avoid this, since :first-child is working as designed. 🤔

aaronshekey avatar Jul 30 '19 16:07 aaronshekey

Related, there's a similar problem if the first or last item in a s-btn-group is hidden. (No corner radii.)

bnickel avatar Jul 30 '19 18:07 bnickel