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.

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.