tables and CSS

Question

lewashby 56 Junior Poster

9 Years Ago

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; }

html-css javascript

4 Contributors
3 Replies
160 Views
1 Day Discussion Span
Latest Post 9 Years Ago Latest Post by Taywin

gentlemedia 803 Master Poster

9 Years Ago

Here are some solutions that deal with tables on small screens, but each with its own pros and cons. Pick 'n choose!

https://bradfrost.github.io/this-is-responsive/patterns.html#tables

diafol commented: I like it +15

Reply to this topic

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.

diafol · Answer 1 · 2015-09-13T19:51:35+00:00

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.

Taywin 312 Posting Virtuoso · Answer 2 · 2015-09-15T18:34:26+00:00

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...