Sam
Reputation: 15
Controlling the size of a table in a div with CSS?
my CSS knowledge is limited and I'm not sure if this is a CSS issue or an HTML one, so I hope someone can guide me.
I've built this parks amenities table and it looks wonderful on my very-large monitor. However, when someone with a smaller screen resolution, like an iPad, looks at it, the table begins to flow out of DIV to the right of everything.
Is there a way to control this so that the table stays within the DIV and has a proper look for smaller resolution devices?
I am providing below the code for the CSS that provides the look for the table and then the HTML for the table itself.
.parks-list-table th {
border: 1px solid #DFDFDF;
border-collapse: collapse;
background-color: #E5EECC;
text-align: center;
padding: 4px;
vertical-align: middle;
}
.parks-list-table td {
border: 1px solid #DFDFDF;
border-collapse: collapse;
padding: 4px;
vertical-align: middle;
}
.parks-list-table {
text-align: center;
font-size: 90%;
margin: 4px;
}
.parks-list-table a {
font-weight: bold;
text-decoration: none;
color: blue;
}
.parks-list-table a:visited {
font-weight: bold;
text-decoration: none;
color: blue;
}
Here's the code for the table:
<center><table class="parks-list-table" border="1px" style="text-align:center;">
<tr>
<th><b>Park, Open Space,<br>Play Area Name</b></th>
<th><b>Type of <br>facility</b></th>
<th><b>Sports<br> Fields</b></th>
<th><b>Trails</b></td>
<th><b>Playground<br>Picnic</b></th>
<th><b>Water<br> Access</b></th>
<th><b>Restrooms</b></th>
<th><b>Other <br>Amenities</b></th>
<th><b>Notes</b></th>
</tr>
<tr>
<td>Bender Park (Planned)</td>
<td>Neighborhood Park</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td>X</td>
<td>Veteran's Memorial</td>
<td>Not yet developed - no public access</td>
</tr>
<tr>
<td>Cedar Creek Park</td>
<td>Neighborhood Park</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="../Centennial/centennial.php">Centennial Riverwalk Park</a></td>
<td>Neighborhood Park</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
<td>X</td>
<td>Ferndale Public Market<br> (Seasonal)<br> Community Events</td>
<td>Public Access Restricted<br> During School Hours</td>
</tr>
<tr>
<td>Flair Park</td>
<td>Neighborhood Park</td>
<td></td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Glacierview Park</td>
<td>Neighborhood Park</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
<td>Small Grassy Area, Views</td>
<td>Access from Snowden Avenue</td>
</tr>
<tr>
<td>Griffintown Park</td>
<td>Neighborhood Park</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
<td>City History Plaques</td>
<td></td>
</tr>
<tr>
<td>Hastings Park</td>
<td>Neighborhood Park</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Limited Parking</td>
</tr>
<tr>
<td>Horizon View Park</td>
<td>Neighborhood Park</td>
<td></td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Michael Moore Park</td>
<td>Neighborhood Park</td>
<td>X</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Oxford Park</td>
<td>Neighborhood Park</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Shannon Park</td>
<td>Neighborhood Park</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td>Developed. No Parking.</td>
</tr>
<tr>
<td>Vista Ridge Park</td>
<td>Neighborhood Park</td>
<td>X</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Vanderyacht Park</td>
<td>Community Park</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td></td>
<td>Dog Park, Fishing Access,<br> Frisbee Golf, BBQ</td>
<td></td>
</tr>
<tr>
<td><a href="../pioneerPark.php">Pioneer Park</a></td>
<td>Regional Park</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td></td>
<td>X</td>
<td>Historic Pioneer Cabins</td>
<td></td>
</tr>
<tr>
<td><a href="../conoco.php">ConocoPhillips Sports Complex</a></td>
<td>Special Use Park</td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
<td>X</td>
<td></td>
<td>Use of Baseball/Softball Fields<br> Require Prior Reservation</td>
</tr>
<tr>
<td>Ferndale Friendship Community Garden</td>
<td>Public Park</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Garden Beds</td>
<td>Please contact Community Garden<br> Coordinator Gloria Perez<br> for more information at <a
href="mailto:[email protected]">[email protected]</a></td>
</tr>
<tr>
<td>Nooksack Levee Public Trail</td>
<td>Public Park</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Tillicum House</td>
<td>Public Amenity</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td>Contact Ferndale Heritage Society<br> for rental information</td>
</tr>
<tr>
<td>Ferndale Senior Activity Center</td>
<td>Public Amenity</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td>X</td>
<td></td>
<td>Accepts Members 55 & Older</td>
</tr>
<tr>
<td>Ferndale Boys & Girls Club</td>
<td>Public Amenity</td>
<td></td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td>Indoor Supervised<br> Play Area</td>
<td>A private, non-profit.<br> Membership required for children.</td>
</tr>
<tr>
<td>Ferndale High School</td>
<td>Public School</td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Public Access Restricted<br> During School Hours</td>
</tr>
<tr>
<td>Skyline Elementary School</td>
<td>Public School</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
<td>Indoor Basketball Courts</td>
<td>Public Access Restricted<br> During School Hours</td>
</tr>
<tr>
<td>Eagleridge Elementary School</td>
<td>Public School</td>
<td>X</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td>Indoor Basketball Courts</td>
<td>Public Access Restricted<br> During School Hours</td>
</tr>
<tr>
<td>Mountain View Elementary School</td>
<td>Public School</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
<td>Indoor Basketball Courts</td>
<td>Public Access Restricted<br> During School Hours</td>
</tr>
<tr>
<td>Cascadia Elementary</td>
<td>Public School</td>
<td>X</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td>Public Access Restricted<br> During School Hours</td>
</tr>
<tr>
<td>Horizon Middle School</td>
<td>Public School</td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Public Access Restricted<br> During School Hours</td>
</tr>
<tr>
<td>Vista Middle School</td>
<td>Public School</td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Public Access Restricted<br> During School Hours</td>
</tr>
<tr>
<td>Central Elementary School</td>
<td>Public School</td>
<td></td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td>Indoor Basketball Courts</td>
<td>Public Access Restricted<br> During School Hours</td>
</tr>
<tr>
<td>Diamond Lane Natural Resource Area</td>
<td>Natural Resource Area</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Undeveloped area.<br> Minimal Access Available</td>
</tr>
<tr>
<td>Glacierview Natural Resource Area</td>
<td>Natural Resource Area</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Undeveloped area.<br> Minimal Access Available</td>
</tr>
<tr>
<td>Spruce Court Natural Resource Area</td>
<td>Natural Resource Area</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Undeveloped area.<br> Minimal Access Available.</td>
</tr>
<tr>
<td>Gardiner Terrace Water Garden & Trail</td>
<td>Private Park</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Private Development Park.<br> Open to the Public</td>
</tr>
<tr>
<td>Lakeridge Estates Walking Trail & Pond</td>
<td>Private Park</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Trails are privately maintained<br> and access may be periodically restricted</td>
</tr>
<tr>
<td>Church Hill Estates</td>
<td>Private Park</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td>Church Hill facilities are privately<br> maintained and available to the public</td>
</tr>
<tr>
<td>Pacfic Highlands Facilities</td>
<td>Private Park</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td></td>
<td>X</td>
<td>Tennis Courts</td>
<td>Pacific Highlands facilities are privately<br> maintained for the benefit of<br> residents and their guests</td>
</tr>
<tr>
<td>Heron Crest Park</td>
<td>Private Park</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td>Heron Crest facilities are privately<br> maintained and available to the public</td>
</tr>
<tr>
<td>Thornton Woods Park</td>
<td>Private Park</td>
<td></td>
<td>X</td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td>Thornton Woods facilities are privately<br> maintained and available to the public</td>
</tr>
<tr>
<td>Correll Park Trail</td>
<td>Private Trail</td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Correll Park facilities are privately<br> maintained and available to the public</td>
</tr>
</table></center>
Upvotes: 0
Views: 180
Answers (1)
Tim Franklin
Reputation: 3060
The browser doesn't break up some of your lengthier headers like "Playground" and "Restrooms" and some of the content like the email address in the last column, so when you look at the application on a smaller screen it has no choice but to force itself to overflow.
There's a variety of things you can do:
- Use responsive design (CSS media queries) to use a smaller font or rearrange/resize elements when the screen size is smaller than you'd expect (http://www.w3.org/TR/css3-mediaqueries/)
- Try some of the word-break CSS features to get it to hyphenate those longer words (http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/)
QUICK FIX (RECOMMENDED, UNLESS YOU WANT TO DIVE DEEPER INTO CSS): Use CSS to set a min-width property on your "inside" div element and set overflow to auto so it will scroll horizontally within that white section, if there's not enough screen real estate for the table to fit
.inside { overflow: auto; min-width: 500px; }
Set a background color on the table of white so the text is at least still readable even though it flows beyond the edges of its container
It all depends on what your target audience is, what browsers and versions they tend to use, their most popular form factors (mobile, tablet, etc.).
Upvotes: 3
Related Questions
- Make HTML table fit width of DIV
- Force HTML table to exceed div width: CSS
- Limiting the width and height of a div in a table
- How to set div width to the width of the table in it?
- How to control the size of a table cell in css
- set width for the div containing elements displayed as table to fit content
- how to let table fit the browser size in html?
- CSS Table Resizing inside a DIV
- DIV to match width of TABLE
- CSS adjusting table size