Border style do not work with sticky position element

by

The problem occurs because of the use of border-collapse: collapse. When browsers collapse the borders, the top and bottom border on the <th> must be getting applied to surrounding elements—the top border to the <table> and the bottom border to the following <tr>.

If you use border-collapse: separate and fashion your borders to sit on one side, the borders will truly attach to the <th>, stay fixed as expected, and appear collapsed.

Here are example styles that can be applied to your HTML snippet.

#wrapper {
  width: 400px;
  height: 200px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: separate; /* Don't collapse */
  border-spacing: 0;
}

table th {
  /* Apply both top and bottom borders to the <th> */
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table td {
  /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table th:first-child,
table td:first-child {
  /* Apply a left border on the first <td> or <th> in a row */
  border-left: 2px solid;
}

table thead th {
  position: sticky;
  top: 0;
  background-color: #edecec;
}

More Related Contents:

  1. Bad: [html] in html code i can’t make two form input in one row [closed]
  2. How to center an element horizontally and vertically
  3. Make container shrink-to-fit child elements as they wrap
  4. How to overlay one div over another div
  5. Element will not stay centered, especially when re-sizing screen
  6. Center image horizontally within a div
  7. How to change the height of a ?
  8. css ellipsis on second line
  9. Position an element relative to its container
  10. curved div with transparent top
  11. How to make a whole ‘div’ clickable in html and css without JavaScript? [duplicate]
  12. HTML/CSS – Best practice for preserving white space on certain elements?
  13. Can a span be closed using ?
  14. How is the margin-top percentage calculated?
  15. How to align flexbox columns left and right?
  16. Stop CSS transition from firing on page load
  17. Inline Form nested within Horizontal Form in Bootstrap 3
  18. How to specify the order of CSS classes?
  19. Using :after to clear floating elements
  20. How can I make a div with irregular shapes with css3 and html5?
  21. Center align container and left align child elements
  22. a href link for entire div in HTML/CSS
  23. Center a large image of unknown size inside a smaller div with overflow hidden
  24. How to change border color of textarea on :focus
  25. CSS Selector for No-Children-But-Not-Empty
  26. Load a low-res background image first, then a high-res one
  27. Can I use an image from my local file system as background in HTML? [duplicate]
  28. How to keep styles after animation?
  29. How to make Bootstrap cards the same height in card-columns?
  30. overflow-y:visible not working when overflow-x:hidden is present [duplicate]

Leave a Comment