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.
