Firefox에서 CSS로 넘쳐나는 테이블

Question

내 테이블을 행동하는 데 어려움이 있습니다. 콘텐츠는 계속 흐르고 제한하려는 시도는 원하는 효과를 생성하지 않습니다.

이것은 내 마크 업입니다 :

<div class="repeatingdiv">
 <div class="hastitle">Some title</div>  
 <div class="hastable">
  <table>
   <thead><tr><th></th></tr></thead>     
   <tfoot><tr><th></th></tr></tfoot>
   <tbody>   
    <tr>
     <td class="col1">Col 1</td>
     <td class="col2">Col 2</td>
     <td class="col3">Col 3</td>
    </tr>
   </tbody>
  </table>
 </div>
</div>

그런 다음 스타일이 있습니다. 그만큼 td's 넘치지 만 운이 좋지 않았습니다. overflow to hidden/auto. 나는 더 나은 행운을 설정하여 오버플로를 설정했습니다 hastable 테이블이 포함 된 클래스. 그러나 나는 여전히 얻는 데 어려움을 겪고 있습니다 Firefox 존중합니다 width 3 개의 열에 대한 분포 : 30%, 35%, 35%. 나는 또한 설정을 시도했다 min-width, 그러나 여전히 운이 없습니다. 페이지 에이 테이블이 몇 개 있고 각 테이블은 고유 한 너비를 취합니다. 이 테이블 혼란에 대한 도움이 있습니까?

.repeatingdiv { }
.hastitle      { margin:0 10px; padding:3px 3px 1px 6px; }       
.hastable      { overflow:hidden; 
                 text-overflow: ellipsis; 
                 margin:10px; 
                 padding:10px; 
               }
table          { }
table tbody    { width: 100%; }
tr    { width: 100%; }
td.col1     { width:30%; min-width:30%; }
td.col2  { width:35%; min-width:35%; }
td.col3  { width:35%; min-width:35%; }

Answer 1

테이블은 스타일이 어렵습니다. CSS에 이것을 추가 해보십시오.

table { table-layout: fixed; width: 100% /* or whatever fixed width */; }

또한 실제 HTML을 사용하는 것이 좋습니다 COL / COLGROUP 열을 다음과 같이 정의하는 요소 :

<table>
 <colgroup class="col1" />
 <colgroup class="col2" />
 <colgroup class="col3" />
 <thead><tr><th></th></tr></thead>     
 <tfoot><tr><th></th></tr></tfoot>
 <tbody>   
  <tr>
   <td>Col 1</td>
   <td>Col 2</td>
   <td>Col 3</td>
  </tr>
 </tbody>
</table>

그럼에도 불구하고, 데이터가 넘쳐나는 셀은 ~ 할 것이다 함유 된 셀, 행 및 테이블을 강제로 맞추도록 강제로 적합합니다. CSS overflow: auto / hidden / scroll 세포에 영향을 미치지 마십시오.

ref :

• CSS : 테이블 레이아웃,
• HTML : 콜로 그룹

Answer 2

테이블을 div로 감싸고 div에 대한 오버플로를 설정하십시오.

<div style='overflow:scroll;'>
    <table>
      ...
    </table>
</div>