>웹 프론트엔드 >JS 튜토리얼 >DataTables에서 테이블 너비를 수정하는 방법

DataTables에서 테이블 너비를 수정하는 방법

巴扎黑
巴扎黑원래의
2017-07-23 15:47:542623검색

테이블에 열이 많은 경우 테이블 너비를 수정해야 할 수 있습니다. 기본 100% 너비는 더 이상 적합하지 않습니다. 기본 너비는 100%입니다. 창 크기를 100%로 변경하려면 테이블 요소에 width="100%"를 추가하세요. 100% CSS가 적용되지 않는 이유는 알 수 없습니다. 데이터 테이블의 고정 너비를 설정하는 방법에 대해 이야기해 보겠습니다. ㅋㅋㅋ 테이블 내용이 너비를 초과하면 가로 스크롤 막대가 나타나며 테이블 너비를 하드 코딩해야 하며 테이블 요소에 직접 쓰면 이유를 알 수 없습니다.

3. 열 너비 설정(선택 사항)
<div id="tableArea"><table id="userTable" class="display table table-bordered" cellspacing="0" ><thead><tr><th style="display: none">ck</th><th>序号</th><th>账号</th><th>姓名</th><th>CPID</th><th>CP名称</th><th>操作</th></tr></thead></table></div>
#tableArea .dataTables_wrapper {position: relative;clear: both;zoom: 1;overflow-x: auto;
}#tableArea table{width: 800px;
}

4. 이때 브라우저를 실행하여 브라우저 창이 800픽셀 미만일 때 테이블에 가로 스크롤 막대가 나타나는 것을 확인합니다. 바로 우리가 원하는 결과입니다.

5. "scrollX":true 구성을 사용하여 가로 스크롤 막대를 구현하는 것은 어떨까요? 렌더링된 웹 페이지를 쿼리하면 테이블이 두 개의 테이블로 분할되어 하나는 테이블 헤더를 나타내고 다른 하나는 테이블 본문을 나타내는 것으로 나타났습니다. 이는 내가 원하는 것이 아니며, 헤더의 내용을 초과하면 숨겨집니다.

위 내용은 DataTables에서 테이블 너비를 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.