[html] 고정 테이블 셀 너비

Html / 글쓴이

많은 사람들이 여전히 테이블을 사용하여 컨트롤, 데이터 등을 레이아웃합니다. 이것의 예로는 인기있는 jqGrid가 있습니다. 그러나 내가 설득 할 수없는 마술이 있습니다 (크게 울부 짖는 테이블, 얼마나 많은 마술이있을 수 있습니까?)

테이블의 열 너비를 설정하고 jqGrid처럼 준수하는 방법은 무엇입니까? 이것을 복제하려고하면 모든 <td style='width: 20px'>셀을 설정하더라도 셀 중 하나의 내용이 20px를 초과하면 셀이 확장됩니다!

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

답변

당신은 사용을 시도 할 수 <col>있는 모든 행에 대한 관리 태그를 테이블 스타일을하지만 당신은 설정해야합니다 table-layout:fixed온 스타일 <table>또는 테이블 CSS 클래스 및 설정 overflow세포에 대한 스타일을

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

<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심지어 을 haunter의 솔루션 . 그렇지 않으면 작동하지 않습니다. 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>

table, tr 요소에 어떤 종류의 스타일도 지정할 필요가 없습니다. overflow : hidden;을 사용할 수도 있습니다. 다른 답변에서 제안한 것처럼 초과 텍스트가 사라집니다.

답변

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

10×10

답변

FULLSCREEN 너비 테이블의 경우 :

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

  • 만약 N 개의 집단이 필요하다면, TH는 N + 1이어야한다

3 열의 예 : 

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;
}
td,th
{
  width:20px;
  word-wrap:break-word;
}

: first-child … : nth-child (1) 또는 …