HTML 표 단일 열을 여러 열로 표시하는 방법은 무엇입니까?

Question

큰 열이 1 개인 간단한 테이블이 있습니다. 이 단일 열을 여러 열로 표시하려고합니다.

Column 
a 
a 
a 
a 
a 
a 

을 다음과 같이 내가

 Column 
a  a  a 
a  a  a 

내 코드와 같은 뭔가가 필요 같은

<table>   
    <thead>Details</thead> 
     <tbody> 
     <tr> 
      <td>a</td> 
     </tr> 

     <tr> 
      <td>a</td> 
     </tr> 
     <tr> 
      <td>a</td> 
     </tr> 
<tr> 
      <td>a</td> 
     </tr> 

     <tr> 
      <td>a</td> 
     </tr> 
     <tr> 
      <td>a</td> 
     </tr> 
</tbody> 
</table> 

을 다음과 같이 현재 나는 밖으로 테이블 구조를 변경하는 것이 할 수있는 방법입니다 있나요?

Jsfiddle : http://jsfiddle.net/wLjmpvuz/

Answer 1

http://jsfiddle.net/wLjmpvuz/8/는 요청에 따라, 당신은 일반 테이블 표시를 방지하고 대신 "시뮬레이션 테이블"을 구현하는 CSS를 사용해야합니다 테이블 구조를 변경하지 않고이 작업을 수행합니다. 이것은 tr 요소를 왼쪽으로 플로팅 된 인라인 블록으로 설정하고 각 세 개의 tr 요소 뒤에 플로팅을 해제하여 수행 할 수 있습니다. 이것은 이전 버전의 IE에서는 작동하지 않습니다. 예 :

table { 
    display: block; 
} 
tr { 
    display: inline-block; 
    float: left; 
    border: solid 1px; 
    width: 4em; 
} 
td { 
    display: inline; 
} 
tr:nth-child(3n+1) { 
    clear: left; 
} 

jsfiddle을 참조하십시오. 이러한 시뮬레이션 된 테이블에는 많은 제한이 있습니다. 브라우저가 열 너비를 할당하도록 할 수 없습니다 (실제 열이 없기 때문에). 대신 요소 폭을 설정하여 열의 인상을 만들어야합니다. 인접한 테두리를 테이블처럼 축소 할 수 없기 때문에 경계를 설정하는 것이 더 효과적입니다.

새 table 요소를 구성하는 JavaScript 코드를 사용하여 세 개의 셀이 있고 원본 테이블에서 가져온 셀 내용을 사용하여 HTML 표식을 유지할 수 있지만 표 구조는 유지할 수 없습니다. 새롭게 생성 된 것.

Answer 2

당신의 질문은 물처럼 명확하지 않다하지만 난 당신을 이해한다면, 당신은 중첩 테이블이 같은

뭔가 싶어 :

<table>   
    <thead> 
     <th>Details</th> 
     <th>Column2 
     </th> 
    </thead> 
     <tbody> 
     <tr> 
      <td> 
       <table> 
        <tbody> 
         <tr> 
          <td>a</td> 
          <td>a</td> 
          <td>a</td> 
         </tr> 
         <tr> 
          <td>a</td> 
          <td>a</td> 
          <td>a</td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
      <td> 
       Other Column Data 
      </td> 
     </tr> 
    </tbody> 
</table> 

피들러 : http://jsfiddle.net/wLjmpvuz/6/

을

중첩 테이블이없는 플랫 테이블 만 필요한 경우 :

<table>   
    <thead>Details</thead> 
     <tbody> 
     <tr> 
      <td>a</td> 
      <td>a</td> 
      <td>a</td> 
     </tr> 
     <tr> 
      <td>a</td> 
      <td>a</td> 
      <td>a</td> 
     </tr> 
    </tbody></table> 

피들러 : http://jsfiddle.net/wLjmpvuz/1/

Answer 3

이 왜 테이블 구조를 변경하지 마십시오? 각각은 새로운 라인입니다. 사용해보기

<table>   
    <thead>Details</thead> 
     <tbody> 
     <tr> 
      <td>a</td> 

      <td>a</td> 

      <td>a</td> 
     </tr> 
     <tr> 
      <td>a</td> 

      <td>a</td> 

      <td>a</td> 
     </tr> 
     <tr> 
      <td>a</td> 

      <td>a</td> 

      <td>a</td> 
     </tr> 

    </tbody></table> 

Answer 4

이렇게하면 문제가 해결 될지 확실하지 않습니다.

<table>   
<thead>Details</thead> 
    <tbody> 
    <tr> 
     <td>a</td> 
     <td>a</td> 
     <td>a</td> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>a</td> 
     <td>a</td> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>a</td> 
     <td>a</td> 
    </tr> 
</tbody></table>