CSS를 사용하여 div의 테이블 크기 제어?

내 CSS 지식이 제한되어 있으며 CSS 문제인지 HTML인지 확실하지 않아 누군가 나를 안내 할 수 있기를 바랍니다.CSS를 사용하여 div의 테이블 크기 제어?

나는이 공원 편의 시설 테이블을 만들었으며, 내 초대형 모니터에서 멋지게 보입니다. 그러나 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:[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>

출처

2013-06-11 Sam

이메일 주소와 같은 내용의 "화장실" "놀이터"와 같이 당신의 더 긴 헤더의 일부와 일부를 파괴하지 않는 브라우저 마지막 열에서 작은 화면으로 응용 프로그램을 볼 때 선택의 여지가 있지만 오버플로를 강요하는 것입니다.

를 사용하여 반응 디자인 (CSS 미디어 쿼리) 화면 크기가 예상하는 것보다 작은 경우 (요소의 크기를 조정/작은 글꼴 또는 다시 정렬을 사용하기 : 당신이 할 수있는 일의 다양한있다

U :
는 그 이상 말 (http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/)
QUICK FIX (당신이 CSS 더 깊이 잠수하지 않으려면, 권장)를 하이픈을 얻기 위해 워드 브레이크 CSS의 기능 중 일부를 시도 http://www.w3.org/TR/css3-mediaqueries/) SE CSS를 사용하여 "내부"div 요소에 최소 너비 속성을 설정하고 오버플로를 auto로 설정하여 해당 흰색 섹션 내에서 가로 스크롤합니다.
.inside { 오버플로 : 자동; 최소 너비 : 500px; 텍스트는 컨테이너 그것은 모두 당신의 광고 타깃이 무엇인지에 따라 달라집니다

의 가장자리를 넘어 흐름에도 불구하고 적어도 아직 읽을 수 있도록}

흰색의 테이블에 배경 색상을 설정, 사용하려는 브라우저 및 버전, 가장 인기있는 폼 팩터 (모바일, 태블릿 등)

출처

2013-06-11 23:00:30

감사합니다. @ 티미. 나는 확실히 CSS에 대해 깊이 생각할 필요가있다. 기본적인 외관 변화에 대해 몇 가지 기본적인 이해가 있었지만 CSS의 진정한 가치는 사이트의 구조를 실제로 완전히 구축하는 데 있으며 아직 그곳에 없기 때문입니다. 나는 너의 제안 중 하나를 시도 할 것이다! – Sam

당신은 그것을 가지고 @ 샘 - 당신에게 행운을 빈다. CSS는 매우 강력하지만 디버깅하기가 어려울 수 있습니다. 스타일을 적용하는 이유, 스타일을 가져 오는 이유, 사용하기 위해 스타일을 추가하는 방법 등을 알아보기 위해 자주 사용하는 브라우저의 웹 개발자 도구 (기본 제공, 대개 F12 또는 메뉴 항목을 통해)를 사용하는 방법을 배우는 것이 좋습니다. 밖으로 물건, 그리고 훨씬 더. –

헤이 @ 티미 - 고마워! 크롬에서 "요소 검사"를 많이 사용합니다! 계속해서 W3의 멋진 튜토리얼을 더 깊이 파고 들기 시작하겠습니다. – Sam

CSS를 사용하여 div의 테이블 크기 제어?

답변

관련 문제