0
body { background-color: gray; }

h1 { color: blue; text-align: center; }

#courtstable
{
  border: 1px solid black;
  position: absolute;
  top: 75px;
  left: 0px;
  width: 25%;
  background-color: yellow;
}

#medicaltable
{
  border: 1px solid black;
  position: absolute;
  top: 75px;
  left: 25%;
  width: 25%;
  background-color: green;
}

#punativetable
{
  border: 1px solid black;
  position: absolute;
  top: 75px;
  left: 50%;
  width: 25%;
  background-color: red;
}

#temptable
{
  border: 1px solid black;
  position: absolute;
  top: 75px;
  left: 75%;
  width: 25%;
  background-color: grey;
}

td { background-color: white; border: 1px solid black; }

In the stylesheet above my four tables are overlapping when the browser windows is adjusted to a smaller scale. Eash table overlaps the table to it's left when shrink the window. How can I lock the table width and get a horrizontal browser scroll bar instead of overlapping tables? Thanks.

2
Contributors
1
Reply
16
Views
2 Years
Discussion Span
Last Post by rtrethewey
0

Did you set the 'position' property of the parent/containing block-level element?

Did you set the 'width' property of the parent/containing block-level element?

Did you set the 'margin', 'padding', or 'border' properties of the <table> elements?

Without seeing at least a skelital version of the corresponding HTML, it's tough to diagnose the issue.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.