변환 표 수직 헤더

나는이변환 표 수직 헤더

<table> 
    <thead> 
     <tr> 
      <th>Numbers</th> 
      <th>Alphabet</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>a</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>b</td> 
     </tr> 
    </tbody> 
</table>

일반적으로 같은 테이블, 첫 번째 열은 Number 1 2 (위에서 아래로)를 보여줍니다이 있고 두 번째 열은 이제 Alphabet a b

, 나는 싶습니다 <thead>을 수직으로, <tbody> <tr>을 수직으로 변환하여 Number 1 2이 수평선이되고 Alphabet a b이 다른 수평 수평선이되도록합니다.

CSS

thead { 
    float: left; 
} 

thead th { 
    display: block; 
} 

tbody { 
    float: right; 
}

thead 수직으로 변합니다

하지만 tbody tr하지 않습니다.

누구나 작동 방법을 알고 있습니까? 고맙습니다

출처

2014-01-23 abcid d

왜 돈을 도움 테이블을 바꾸지 않습니까? 내 피들보기> http://jsfiddle.net/nNW9J/! – zey

고맙습니다. 그런 식으로 테이블을 만들어야합니다. 이것은 웹 반응 형입니다. 먼저 큰 화면에 정상적으로 표시되고 작은 화면으로 변환됩니다. 어떤 생각? –

테이블 테이블이 동적으로 변경되지 않으면 왜 이런 종류의 구조를 사용하지 마십시오.

<table> 
    <tr> 
     <th>Numbers</th> 
     <td>1</td> 
     <td>1</td> 
    </tr> 
    <tr> 
     <th>Alphabet</th> 
     <td>a</td> 
     <td>a</td> 
    </tr> 
    </table>

출처

2014-01-23 04:22:13 Saurabh

내 친구,이 상태에서, thead 및 tbody를 사용하지 마십시오. Do do this,

<table> 
    <tr> 
    <th>Numbers</th> 
    <td>1</td> 
    <td>2</td> 
    </tr> 
    <tr> 
    <th>Alphabet</th> 
    <td>a</td> 
    <td>b</td> 
    </tr> 
</table>

출처

2014-01-23 04:31:13 Shivam

감사합니다, Shivam! 그런 식으로 테이블을 만들어야합니다. 이것은 웹 반응 형입니다. 먼저 큰 화면에 정상적으로 표시되고 작은 화면으로 변환됩니다. 어떤 생각? –

죄송합니다. Zey 저는 웹 반응에 대한 적절한 생각이 없습니다. – Shivam

표 레이아웃을 변경하지 않는 이유는 확실하지 않지만 이유는 분명합니다. 어쨌든 이것은 쉬운 일 :

가

여기에 CSS 코드

table{ 
    display:block; 
    padding: 0px; 
    border-collapse:collapse; 
    border-spacing:0; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
} 
thead{ 
    display: block; 
    float: left; 
    margin: 0px; 
    padding: 0px; 
    width: 100px; 
} 
tbody{ 
    margin: 0px; 
    padding: 0px; 
} 
tbody tr { 
    float:left; 
} 
th, td{ 
    display:block; 
    padding: 5px; 
    margin: 0px; 
} 
thead > tr th:nth-child(odd) { 
     display:block; 
     float:left; 
} 
thead > tr th:nth-child(even) { 
    display:block; 
    float:left; 
} 
tbody > tr td:nth-child(odd) { 
    display:block; 
} 
tbody > tr td:nth-child(even) { 
    display:block; 
    float:right; 
}

그리고 여기에 행해져 Yout HTML 테이블 구조와 데모입니다 아니었다 : http://jsfiddle.net/darkosss/83kVc/

는 희망이

출처

2014-01-23 06:21:23 Darko

변환 표 수직 헤더

답변

관련 문제