고정 테이블 셀 폭

고정 테이블 셀 폭

많은 사람들이 여전히 테이블을 사용하여 컨트롤, 데이터 등을 레이아웃합니다. 이 중 하나가 인기 있는 jqGrid입니다.하지만, 제가 헤아릴 수 없는 마법이 일어나고 있습니다(큰 소리로 울부짖는 테이블, 얼마나 많은 마법이 있을 수 있을까요?).

테이블의 열 너비를 설정하고 jqGrid가 수행하는 것처럼 준수하는 것이 어떻게 가능합니까?만약 내가 이것을 복제하려고 한다면, 내가 모든 것을 설정할지라도.<td style='width: 20px'>그 세포들 중 하나의 내용물이 20ppm 이상이 되면, 그 세포는 팽창합니다!

아이디어나 통찰력이 있습니까?

사용해 볼 수 있습니다.<col>태그 모든 행에 대해 테이블 스타일 관리를 수행하지만 다음을 설정해야 합니다.table-layout:fixed의 문체.<table>또는 테이블 CSS 클래스를 설정합니다.overflow세포 스타일

http://www.w3schools.com/TAGS/tag_col.asp

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

그리고 이것은 당신의 CSS입니다.

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

이제 HTML5/CSS3에서 우리는 문제에 대한 더 나은 해결책을 가지고 있습니다.제 생각에는 이 순수한 CSS 솔루션이 권장됩니다.

table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/

<table class="fixed">
    <tr>
        <td>Veryverylongtext</td>
        <td>Actuallythistextismuchlongeeeeeer</td>
        <td>We should use spaces tooooooooooooo</td>
    </tr>
</table>

테이블의 테이블을 세팅해야 합니다.width사냥꾼의 해결책에서도.그렇지 않으면 작동하지 않습니다.
또한 vsync가 제안한 새로운 CSS3 기능은 다음과 같습니다.word-break:break-all;이렇게 하면 공백이 없는 단어도 여러 줄로 구분됩니다.코드를 다음과 같이 수정하면 됩니다.

table.fixed { table-layout:fixed; width:90px; word-break:break-all;}

최종 결과

table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}

저는 하나의 긴 테이블 td 셀을 가지고 있었는데, 이것은 테이블을 브라우저의 가장자리로 밀어넣었고 보기 흉하게 만들었습니다.저는 단지 그 열을 고정된 크기로만 하고 지정된 너비에 도달할 때 단어를 깨기를 원했습니다.그래서 이것은 나에게 잘 먹혔습니다.

<td><div style='width: 150px;'>Text to break here</div></td>

테이블에 스타일 종류를 지정할 필요가 없습니다. tr 요소.다른 답변에서 제안한 대로 overflow:hidden을 사용할 수도 있지만 초과 텍스트가 사라집니다.

전체 화면 너비 표의 경우

• 테이블 너비는 100%여야 합니다.

• N개의 열이 필요한 경우 TH는 N+1이어야 합니다.

세 개의 열에 대한 예제:

table.fixed {
      table-layout: fixed;
      width: 100%;
    }
table.fixed td {
      overflow: hidden;
    }

  <table class="fixed">
      <col width=20 />
      <col width=20 />
      <col width=20 />
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>FREE</th>
    </tr>
    <tr>
      <td>text111111111</td>
      <td>text222222222</td>
      <td>text3333333</td>
    </tr>
  </table>

table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10x10

table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}

:첫 번째 아이...:n번째 자식(1) 또는 ...

언급URL : https://stackoverflow.com/questions/4185814/fixed-table-cell-width