0

我的CSS知识有限，我不确定这是CSS问题还是HTML问题，所以我希望有人能指导我。

我已经制作了这个公园设施表，它在我的超大显示器上看起来很棒。但是，当屏幕分辨率较小的人（例如 iPad）看它时，表格开始从 DIV 流出到所有内容的右侧。

有没有办法控制这一点，以便表格保持在 DIV 内并正确查找更小的分辨率设备？

这是网站。

我在下面提供了 CSS 的代码，它提供了表格的外观，然后是表格本身的 HTML。

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

这是表的代码：

<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:rainglo@comcast.net">rainglo@comcast.net</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>
4

1 回答 1

3

浏览器不会分解一些较长的标题，如“Playground”和“Restrooms”，以及最后一列中的电子邮件地址等一些内容，所以当你在较小的屏幕上查看应用程序时，它别无选择强迫自己溢出。

你可以做很多事情：

  • 当屏幕尺寸小于您的预期时，使用响应式设计（CSS 媒体查询）使用较小的字体或重新排列/调整元素大小（http://www.w3.org/TR/css3-mediaqueries/）
  • 尝试一些断词 CSS 功能，让它连字那些较长的词（http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/）

  • 快速修复（推荐，除非您想深入了解 CSS）：使用 CSS 在您的“内部”div 元素上设置 min-width 属性并将溢出设置为自动，以便在该白色部分内水平滚动，如果没有足够的筛选适合表格的空间

    .inside { 溢出：自动；最小宽度：500px；}

  • 在白色的表格上设置背景颜色，以便文本至少仍然可读，即使它超出其容器的边缘

这完全取决于您的目标受众是什么，他们倾向于使用什么浏览器和版本，他们最流行的外形（手机、平板电脑等）。

于 2013-06-11T23:00:30.987 回答