html 테이블을 사용할 때 CSS3 다중 열에서 열 나누기가 강제로 수행됩니다.

여러 열 레이아웃이 작동하며 이제는 html 테이블 (http://lucas.ucs.ed.ac.uk/tutorials/CSS3_columns/ 참조)을 사용하려고합니다. 단 하나의 위 흠이 있습니다. 다음 칼럼을 위해 자르고, 커트는 중간 열이 될 수 있습니다 ... 그리고 그것은 끔찍한 것처럼 보입니다. 내가 < 페이지 > 요소의 단지 일련이었다 페이지를했다 때html 테이블을 사용할 때 CSS3 다중 열에서 열 나누기가 강제로 수행됩니다.

, 나는 문단 사이에 열 - 휴식을 강제로 함께 단락의 내용을 유지하기 위해 간단한 style="display: inline-block;" 트릭을 사용했다.

당연히,이 테이블 작동하지 않습니다.

내가 사업부에 각각 <TD>의 내용을 가하고, 그리고 inline-block;" 스타일을 적용하려고했습니다; 나는

{ 
    -webkit-column-break-inside: avoid; 
    -moz-column-break-inside: avoid; 
    -moz-page-break-inside: avoid; 
    page-break-inside: avoid; 
}

> TD <->의 TR <와의를 적용 해봤 - 아니 기쁨.

사람에게 CSS3 다중 열이 표준이 잘 구현되지 않습니다 오늘로

출처

2013-09-03 CodeGorilla

를 사용하는 경우, 전체 행에 침입하기 위해 HTML 표를 얻기위한 몇 가지 제안이 있습니다. div를 사용하여 행 div가 블록 요소로 중단되지 않도록 의사 테이블을 만드는 것이 좋습니다. div 테이블을 생성하는 것은 테이블을 만드는 것만 큼 간단합니다. 그러나 아마 브라우저에서 더 무겁습니다.

우는 소리가 나는 작은 예를 보여줍니다. 나는 그것이 잘 작동되기를 바랍니다. 내가 설계 할 수있는 유일한 솔루션입니다.

<head> 
<style> 
.columns { 
position : relative ; 

column-width: 27em; 
-moz-column-width: 27em; 
-webkit-column-width: 27em; 
column-rule: 2px solid red; 
-webkit-column-rule: 2px solid red; 
-moz-column-rule: 2px solid red; 
column-gap: 12px; 
-webkit-column-gap: 12px; 
-moz-column-gap: 12px; 

} 

.testerRow { 
    display : block ; 
    height : 1em ; 
    width : 100% ; 
    margin : 0px ; 
} 



div.tl1, div.tl2, div.tl3 { 
    display : block ; 
    float : left ; 
    width : 32.5%; 
    height : 15px ; 
    border : 2px solid red ; 
    border-left : 0px solid red ; 
    border-top : 0px solid red ; 
} 

div.tl1 { 
    border : 2px solid red ; 
    border-top : 0px ; 
} 

</style> 
</hed> 
<body> 
<div class="columns"> 
    <div class="testerRow"> 
     <div class="tl1">test</div> 
     <div class="tl2">test2</div> 
     <div class="tl3">test3</div> 
    </div> 
    <div class="testerRow"> 
     <div class="tl1">test</div> 
     <div class="tl2">test2</div> 
     <div class="tl3">test3</div> 
    </div> 
    <div class="testerRow"> 
     <div class="tl1">test</div> 
     <div class="tl2">test2</div> 
     <div class="tl3">test3</div> 
    </div> 
    <div class="testerRow"> 
     <div class="tl1">test</div> 
     <div class="tl2">test2</div> 
     <div class="tl3">test3</div> 
    </div> 
    <div class="testerRow"> 
     <div class="tl1">test</div> 
     <div class="tl2">test2</div> 
     <div class="tl3">test3</div> 
    </div> 
    <div class="testerRow"> 
     <div class="tl1">test</div> 
     <div class="tl2">test2</div> 
     <div class="tl3">test3</div> 
    </div> 
    <div class="testerRow"> 
     <div class="tl1">test</div> 
     <div class="tl2">test2</div> 
     <div class="tl3">test3</div> 
    </div> 
    <div class="testerRow"> 
     <div class="tl1">test</div> 
     <div class="tl2">test2</div> 
     <div class="tl3">test3</div> 
    </div> 
</div> 
</body>

아마 상위 경계를 가진 마지막 .testerRow의 DIV 아이들이 아래쪽 테두리를 사용하는 것보다도 효율적으로 CSS3 선택자와 아래쪽 테두리를 추가. 구현에 따라 다릅니다. 행운을 빕니다!

출처

2014-02-10 06:26:00 Torrien

html 테이블을 사용할 때 CSS3 다중 열에서 열 나누기가 강제로 수행됩니다.

답변

관련 문제