HTML 테이블에서 열 너비 확장을 방지하는 방법은 무엇입니까?

테이블의 열 너비 확장 방지

많은 개발자는 테이블 작업 시 열 너비를 일정하게 유지해야 하는 문제에 자주 직면합니다. , 셀 내의 텍스트 길이에 관계없이. 이 기사에서는 이 문제를 해결하고 확장을 비활성화하면서 열 너비를 설정하는 솔루션을 제공합니다.

문제 이해

기본적으로 텍스트가 테이블 셀의 지정된 너비를 초과하면 포함 열이 확장되어 오버플로를 수용합니다. 이 동작은 원하는 열 너비의 일관성과 모순됩니다.

해결책: 열 너비 안정성

이 문제를 해결하는 데 중요한 두 가지 CSS 속성이 있습니다.

• table-layout:fixed: 이 속성은 테이블 레이아웃 모드를 고정으로 설정합니다. 셀 내용에 관계없이 열 너비가 일관되게 유지되도록 합니다.
• width: 이 속성은 열의 명시적인 너비를 설정합니다.

다음 속성과 함께 이러한 속성을 구현합니다. 테두리와 표 너비에 대한 적절한 CSS 스타일이 의도한 바를 달성합니다. 동작:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

예:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

이 코드는 두 번째 헤더 셀의 텍스트가 훨씬 더 길어졌습니다. Overflow:hidden 속성은 셀 경계를 넘어 튀어나올 수 있는 초과 텍스트를 숨깁니다.

위 내용은 HTML 테이블에서 열 너비 확장을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!