CSS를 사용하여 단어 랩핑없이 특정 폭의 테이블 셀을 만듭니다.

Question

프로젝트에서 나는 테이블 행당 하나의 HTML 라인만으로 특정 너비의 열이있는 테이블을 렌더링해야했습니다 (포장 없음). 각 테이블 셀에 상단과 하단에 1 픽셀의 패딩을, 왼쪽과 오른쪽에 2 픽셀이 필요합니다. 내가 그 작품을 생각해 낼 수있는 가장 좋은 방법 크로스 브라우저 이런 식으로 테이블 내부에 TD 안에 DIV를 넣는 것입니다.

<style>
  table.grid { border: none; border-collapse: collapse; }
  table.grid tbody tr td { padding: 1px 2px; }
  table.grid tbody tr td div { overflow: hidden; white-space: nowrap; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><div>One</div></td>
      <td class="two"><div>Two</div></td>
    </tr>
    <tr>
      <td class="one"><div>Another One</div></td>
      <td class="two"><div>Another Two</div></td>
    </tr>
  </tbody>
</table>

추가 DIV를 추가 할 필요성을 제거하고 싶습니다. 나는이 문제를 인터넷 검색하는 데 많은 시간을 보내지 만 대안을 찾을 수는 없습니다.

여분의 div를 추가 할 필요없이 필요한 일을 할 수있는 방법이 있습니까? 그렇다면 무엇입니까?

테이블을 사용하지 않고 원하는 결과를 얻는 방법이 있습니까?

Answer 1

불행히도 테이블 요소는 오버플로를 존중하지 않으므로 하위 요소에 적용해야합니다.

편집 : FF 에서이 효과를 만들 수 있기 때문에 너무 빨리 말했을 수 있습니다. max-width 그리고 나는 발견했다 이건 IE에 효과가있을 수 있습니다. 당신은 매일 무언가를 배웁니다.

EDIT2 : 예, IE7에서는 적어도 효과가 있지만 텍스트에서 공백을 가질 수없는 심각한 경고가 있습니다.  . 나는 당신이 아마도 고집해야한다고 생각합니다 <div> 청결과 호환성을위한 솔루션.

Answer 2

실제로, 당신은 할 수 있습니다.

일반적으로 테이블은 필요한 공간을 차지합니다. 당신이 주면 table 폭 100%, 공유하다 세포 사이 그들의 내용에 관해.

테이블에는 여유 공간이 없습니다 : 어느 시점에서 남은 공간을 차지하는 셀이 있어야합니다. 일단 다른 크기가 설정되면.

셀 너비를 설정하려면 줘 width 그리고 a max-width 같은 크기로. N 열이있는 테이블의 경우 N-1 열로 수행 할 수 있으며 마지막 열은 나머지 공간을 차지합니다.

N-2 열로 그렇게하면 고정되지 않은 두 열은 나머지 공간을 공유합니다.

이 모든 것이 있으면 추가 할 수 있습니다 white-space:no-wrap 및/또는 text-overflow:ellipsis 당신이 원하는 경우.

다음은 이미지 예제 (내 RSS 리더)입니다. https://i.stack.imgur.com/bppkp.png

그리고 살아있는 예 : https://codepen.io/lehollandaisvolant/pen/revnly?editors=1100

당신은 그것이 실제로 놀랍도록 강력하다는 것을 알 수 있습니다. 코데 펜에서는 다음을 볼 수 있습니다.

• 일부 셀은 고정 너비입니다
• 일부 셀은 포함 된 텍스트에 적합합니다
• 일부 셀은 용기에 맞습니다

그리고 각 셀의 동작을 결정할 수 있습니다 (컨테이너에 맞는 셀이 하나있는 한).

Answer 3

각 테이블 셀 내에서 div를 중첩 할 필요는 없습니다. 다음은 동일한 영향을 얻어야합니다.

<style>
  table.grid { border-collapse: collapse; }
  table.grid tbody tr td { overflow: hidden; white-space: nowrap; padding: 1px 2px; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><span>One</span></td>
      <td class="two"><span>Two</span></td>
    </tr>
    <tr>
      <td class="one"><span>Another One</span></td>
      <td class="two"><span>Another Two</span></td>
    </tr>
  </tbody>
</table>

Answer 4

단순히 테이블을 div로 바꿀 수도 있습니다.

그런 다음 CSS에서 열 너비를 정의해야합니다 (모든 브라우저에서 작동하기가 까다로울 수 있음).

예 : 코드는 다음과 같습니다.

<div class="mainBoxOfTable">
    <div class="Line">
      <div class="ColumnOne">One</div>
      <div class="ColumnTwo">Two</div>
    </div>
    <div class="Line">
      <div class="ColumnOne">another One</div>
      <div class="ColumnTwo">another Two</div>
    </div>
 </div>