CODEWITHSUNDEEP
htmlcssscrollbar
Jgoodwyn
Jgoodwyn

Reputation: 152

Space appears between a table element and the overflow scrollbar

So I've been trying to make a table that contains information that has the main title/header cells to stick to the top when scrolling but in the middle of making it, I made a containing div element around the whole table to allow a set height and overflow properties. But when the preview loaded it showed a gap between the table itself and the scrollbar. So I tried to do some research and found that I could keep all the properties in the table css section by putting it into display:block , but even after I did that the same space that was show before was still apparent except it shoved the content to the side. I do not want any help regarding the sticky header, since I want to do that myself but any help with the scroll bar would be super helpful!

Also, not related to the question, I want to know if there is any way to change the scrollbar into something else besides the default browser scrollbar.

Codepen: http://codepen.io/PorototypeX/pen/iKJAq

CSS

div.table_edit {
  height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
  display: inline-block;
}
table {
  text-align: center;
  width: 1210px;
  background: #BABABA;
  padding: 0;
  border-collapse: collapse;
}
th {
  margin: 0;
  width: calc(1210px / 6);
  border: none;
  padding: 15px;

}
#header_row {
  background: #636363;
}
th.titleone {
  background: #292929;
}
td {
  padding: 15px;
  width: calc(1210px / 6);
}
td.namebar {
  background: #404040;
  font-weight: bold;
}
tr.alternating_color {
  background: #9C9C9C;
}
tr:hover {
  background: #808080;
}
tr.a:ternating_color:hover {
  background: #808080;
}

Upvotes: 4

Views: 4317

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241178

I'd suggest making .table_edit an inline-block element; which will cause the dimensions of the element to be determined by its containing elements (which is ideally what you want). You would also need to add text-align:center to the parent element, in this case I added it to the body element.

UPDATED EXAMPLE

div.table_edit {
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    display: inline-block;
}

Upvotes: 3

Related Questions