0

In the page below if the screen is to small or is resized it causes the data in the table cells to be out of sight. I would either like there to be a scroll bar at the bottom of the page or I'd like for the data in the table cells to roll onto the line below. Any idea how I could best accomplish this? Thanks for any and all replies.

<html>
  <head>
    <Title>Pop Report</title>
    <link rel="stylesheet" type="text/css" href="popreport2.css">
    <h1>Pop Report</h1>
  </head>

<body>



  <table id='courtstable'>
    <tr>
      <th id='courtsheader'>Courts</th>
    </tr>
    <tr>
      <td><pre>John Smith&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete</a>&#10;
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>John Smith&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete</a>&#10;
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>John Smith&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete</a>&#10;
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>John Smith&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete</a>&#10;
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>    <tr>
      <td><pre>John Smith&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete</a>&#10;
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>John Smith&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete</a>&#10;
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>John Smith&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete</a>&#10;
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>John Smith&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete</a>&#10;
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>John Smith&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete</a>&#10;
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>John Smith&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete</a>&#10;
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>John Smith&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete</a>&#10;
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>John Smith&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete</a>&#10;
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
  </table>



  <table id='medicaltable'>
    <tr>
      <th>Medical</th>
    </tr>
    <tr>
      <td><pre>John Dow&#9;12345678&#11;(B)&#9;SPND&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    </tr>
    <tr>
      <td><pre>John Dow&#9;12345678&#11;(B)&#9;SPND&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    </tr>
    <tr>
      <td><pre>John Dow&#9;12345678&#11;(B)&#9;SPND&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    </tr>
    <tr>
      <td><pre>John Dow&#9;12345678&#11;(B)&#9;SPND&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    </tr>
    <tr>
      <td><pre>John Dow&#9;12345678&#11;(B)&#9;SPND&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    </tr>
    <tr>
      <td><pre>John Dow&#9;12345678&#11;(B)&#9;SPND&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    </tr>
    <tr>
      <td><pre>John Dow&#9;12345678&#11;(B)&#9;SPND&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    </tr>
    <tr>
      <td><pre>John Dow&#9;12345678&#11;(B)&#9;SPND&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    </tr>
    <tr>
      <td><pre>John Dow&#9;12345678&#11;(B)&#9;SPND&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    </tr>
    <tr>
      <td><pre>John Dow&#9;12345678&#11;(B)&#9;SPND&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
  </table>



  <table id='punativetable'>
    <tr>
      <th>Punative</th>
    </tr>
    <tr>
      <td><pre>Jane Dow&#9;12345678&#11;(W)&#9;SCCF&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>Jane Dow&#9;12345678&#11;(W)&#9;SCCF&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>Jane Dow&#9;12345678&#11;(W)&#9;SCCF&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>Jane Dow&#9;12345678&#11;(W)&#9;SCCF&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>Jane Dow&#9;12345678&#11;(W)&#9;SCCF&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>Jane Dow&#9;12345678&#11;(W)&#9;SCCF&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
  </table>



  <table id='temptable'>
    <tr>
      <th>Temporary</th>
    </tr>
    <tr>
      <td><pre>Who Ever&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>Who Ever&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>Who Ever&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>Who Ever&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>Who Ever&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>Who Ever&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>Who Ever&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>Who Ever&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>Who Ever&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>Who Ever&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
    <tr>
      <td><pre>Who Ever&#9;12345678&#11;(W)&#9;MCCX&#9;<a href=''>Edit</a>/<a href=''>Delete&#10;</a>
8-05-15 / 8-08-15&#9;&#9;&#9;&#9;&#9;</pre></td>
    </tr>
  </table>

</body>

CSS File

body { background-color: gray; }

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

table { table-layout: fixed; }

#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; }
4
Contributors
3
Replies
20
Views
1 Year
Discussion Span
Last Post by Taywin
0

Are you saying that you don't get a horizontal scroll bar when the content is off the page?

Withr regard to dropping table cells to the next row, I think you'll need to use inline-block list items or use a js script.

0

The issue is from the design layout... It is specified for a fix setup of display... You could add min-width to the table, but it won't solve all the problems though...

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.