나는이 웹 사이트에 테이블이 모바일 장치에서 적절하게 행동하려고 노력 해요 : http://whitehallrow.com/classic-whitehall-spirit-17-slide-seat-model/분할하는 방법/모바일 장치를위한 테이블이 좁게
페이지에 두 개의 테이블이 있습니다; 사양 테이블 및 보트 옵션 가격 테이블. 스펙 테이블을 가운데로 나누어 랩핑하면 화면의 왼쪽에 모든 굵은 글씨가 표시되고 데이터는 오른쪽에 표시됩니다.
또한 가격 책정 테이블이 좁아 져서 페이지 측면에서 벗어나지 않도록하고 싶습니다. 나는 각 열에 퍼센티지로 너비를 할당 해 보았습니다 만, 그 결과를 얻지 못했습니다.
HTML 테이블을 다루는 데별로 좋지 않아서 여기 조금 잃어 버렸습니다. 어떻게 협력 할 수 있습니까?
먼저, 여기서는 HTML을 가르쳐 드릴 수 없습니다. 너는 너 자신을 배울 필요가있을 것이다.
두 번째로, 페이지는 훨씬 더 강력 해졌습니다. 기성품 테마로 일부 컨텐츠 관리 시스템을 사용하고 있습니까? 왜냐하면 HTML과 CSS는 단순한 사이트에서 너무 무겁기 때문입니다. 이는 특히 모바일 "최적화"에 대한 변경을 더욱 어렵게 만듭니다.
specs 테이블의 경우 : 4 x 4 테이블 대신 8 개의 행이있는 하나의 2 열 테이블을 사용하기 만하면됩니다.
그러나 데스크톱 브라우저에서 동일하거나 유사한 레이아웃을 유지하려는 경우 조금 더 복잡합니다.
가격표의 경우 : 스타일 시트에서 하드 코드 된 style="width: 400px과 width: 100%을 모두 제거하십시오. (후자는 모든 테이블에 영향을 미치지 만 모든 테이블에 width: 100%이있는 것은 좋지 않습니다.) 그렇게하면 표의 내용과 화면 너비에 따라 표의 크기가 자동으로 조정됩니다. 테이블 셀에 패딩을 추가하기 만하면 값이 서로 위로 올라가지 않습니다.
"사양"표는 표 형식의 데이터를 실제로 표현하지 않습니다. 여기서는 레이아웃 용도로만 사용됩니다 (보 및 전원이 서로 어떻게해야할까요?). – cimmanon
예, 테이블은 주로 데이터를 쉽게 읽을 수 있도록되어 있습니다. 각 행은 서로 관련이없는 두 개의 값을 나타냅니다. – Ben