웹 페이지를 만들 때 표 너비가 잘못 정렬되는 문제가 자주 발생합니다. HTML에서 테이블 태그의 높이와 너비 설정에 대한 내용을 자세히 살펴보았는데, 이제 정리하면 다음과 같습니다.
1. 테이블의 너비, 높이 설정 및 그 기능 : 테이블에 설정된 높이는 실제로 최소값을 설정합니다. 즉, 테이블의 내용이나 전체 행 높이가 이 설정값을 초과할 경우 테이블의 높이 값이 테이블이 자동으로 확장됩니다. 테이블의 내용이나 행 높이가 이 값에 도달하지 않으면 자동으로 이 값으로 확장됩니다. 테이블에 설정된 너비 값은 일반적으로 테이블 너비의 최대값이며, 내부 콘텐츠 너비가 이를 초과하더라도 변경할 수 없습니다. (내부 내용이 그림인 경우 표 너비가 변경될 수 있습니다.)
2. tr 태그의 너비 및 높이 설정과 그 기능 : tr 태그의 너비 설정은 아무런 영향을 미치지 않습니다. 왜냐하면 첫 번째 지점에서 볼 수 있듯이 테이블의 너비는 변경할 수 없으며 tr 태그는 변경되지 않기 때문입니다. 물론 효과는 없습니다. 따라서 tr의 높이 설정에 대해서만 논의할 수 있습니다. tr의 높이 설정은 여러 tr 간의 설정과 관련이 있습니다. 여러 개의 tr에 특정 높이 값이 설정되면 각 tr의 높이는 설정된 값에 비례하여 전체 높이 값에 할당됩니다. 여기서는 전체 높이 값을 언급합니다. 여러 TR이 특정 높이 값을 설정하지 않으면 전체 높이 값이 고르게 분포됩니다. 일부 TR에는 특정 값이 설정되어 있고 일부 TR은 특정 값이 기본값으로 설정되지 않은 경우 먼저 각 TR의 기본 요구 사항을 확인한 다음 특정 값이 설정된 나머지 TR을 만족시킨 다음 모든 TR을 충족시킵니다. 특정 값이 설정되지 않은 경우 tr. 마지막 경우에는 tr의 전체 설정 값에 비해 전체 너비가 충분하지 않은 상황도 고려해야 합니다. 충분하지 않은 경우 테이블의 기본 요구 사항을 충족해야 합니다. 여기로 연장되었습니다. 그런 다음 높이가 설정된 tr을 고려하고 마지막으로 높이가 설정되지 않은 tr을 고려하십시오.
3. td 태그의 너비와 높이 설정 및 해당 기능 : td 태그의 너비와 높이가 모두 유효합니다. 먼저 TD의 너비를 살펴보겠습니다. 특정 TD의 너비는 열에 있는 각 TD의 너비와 관련이 있습니다. 이것이 우리를 가장 혼란스럽게 합니다. 여기서는 글로벌 관점에서 특정 TD의 너비를 파악해야 합니다. 이 너비 설정에서는 너비를 결정할 수 없습니다. 각 열의 너비를 파악하면 작업이 더 쉬워집니다. 이때 각 TD 간의 너비 분포는 두 번째 기사의 각 tr의 높이 분포 규칙을 기반으로 합니다. 한 가지 차이점은 기본적으로 각 TD의 너비가 균등하게 분포되지 않고 실제에 따라 비례한다는 것입니다. 콘텐츠를 배포합니다. td의 높이 설정을 살펴보겠습니다. 이것은 비교적 간단합니다. 그러나 각 td의 높이는 이 행의 각 td의 높이를 결정하기 위해 td가 위치한 행의 최대 높이에 따라 달라집니다. 각 행의 높이 할당 원리는 tr에 의해 결정됩니다. 주목해야 할 또 다른 사항은 td 높이와 tr 높이 사이의 관계입니다. 우선, 내용의 필요에 따라 결정되어야 하며, 이를 기준으로 설정값이 더 큰 쪽이 사용되며, 다른 쪽은 설정값이 없을 경우 사용됩니다. 설정값이 있으면 설정값이 사용됩니다.
1. 전통적인 방법을 사용하라
<테이블 너비=400> <tr> <td 너비=100></td> <td 너비=100></td> <td 너비=100></td> <td 너비=100></td> < /tr> <테이블>
2. CSS를 사용하세요
<style>.td{너비:100px;}</style><테이블 너비=400> <tr> <td 클래스=td></td> <td 클래스=td></td> <td 클래스=td> </td> <td class=td></td> </tr> <테이블>위의 두 가지 방법에서 발생할 수 있는 문제는 이미지 너비가 100보다 큰 등 콘텐츠가 설정을 초과하면 자연스럽게 확장되어 테이블 너비가 자동으로 조정된다는 것입니다.
3. CSS를 사용하세요
<style>.td{width:100px;overflow:hidden}</style><table width=400> <tr> <td class=td></td> <td class=td></td> <td 클래스 =td></td> <td class=td></td> </tr> <테이블>이 방법을 사용하면 초과된 부분을 숨길 수 있습니다. Overflow 속성 값을 스크롤 또는 자동으로 설정한 경우 이 방법을 사용할 수 있습니다. 또는 자동으로 설정하면 이 방법을 사용할 수 있습니다. 스크롤 또는 자동으로 설정하면 이 방법을 사용할 수 있습니다.
요약위 내용은 에디터가 소개해드리는 HTML 테이블 셀의 너비와 높이를 설정하는 방법입니다. 문의사항이 있으시면 메시지를 남겨주시면 에디터가 답변해드리겠습니다. 시간. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!