셀 내용 길이에 관계없이 HTML에서 표 열 너비를 어떻게 보존할 수 있습니까?

셀 내용 길이에도 불구하고 표 열 너비 유지

표 형식 표현에서는 텍스트에 관계없이 일관된 열 너비를 유지하는 것이 바람직한 경우가 많습니다. 셀 내 길이입니다. 그러나 HTML 테이블의 기본 동작에서는 더 긴 콘텐츠를 수용하기 위해 열 너비를 확장할 수 있습니다.

이 자동 확장을 비활성화하고 고정된 열 너비를 보장하려면 다음 단계를 따르세요.

1. 해당 열 내의 th(테이블 헤더) 및 td(테이블 데이터) 요소 모두에 대한 너비 속성을 사용하여 원하는 열 너비를 지정합니다. 예:

th, td {
  width: 100px;
}

2. 테이블의 테이블 레이아웃 속성을 "fixed"로 설정합니다. 이는 브라우저가 지정된 열 너비를 적용하도록 지시합니다.

table {
  table-layout: fixed;
}

3. 잠재적인 텍스트 오버플로가 테이블 외부로 쏟아지는 것을 방지하려면 Overflow: Hidden; th 및 td 요소에 속성을 추가하세요.

th, td {
  overflow: hidden;
}

4. 테이블과 해당 셀의 모든 테두리와 크기가 HTML 속성이 아닌 CSS를 사용하여 정의되었는지 확인하세요.

이 단계를 따르면 개별 테이블의 텍스트 길이에 관계없이 HTML 테이블의 열 너비를 일정하게 유지할 수 있습니다. 세포.

위 내용은 셀 내용 길이에 관계없이 HTML에서 표 열 너비를 어떻게 보존할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!