열 내용으로 HTML 테이블 채우기

Question

뷰포트의 크기에 따라 반응 형 그리드에 표시하려고하는 일련의 데이터가 있습니다.

이 데이터는 알파벳 순서, 그리고 가독성, 나는 열을 기준으로 순서에 표시하고 싶습니다 : 넓은 뷰포트에,이 다음과 같을 수, 바탕 화면에서

|---------|--------|--------| 
| Abi  | Donald | George | 
| Boris | Ernest | Harold | 
| Charlie | Frank | Ivan | 

:

|-------|---------|--------|--------|------| 
| Abi | Charlie | Ernest | George | Ivan | 
| Boris | Donald | Frank | Harold |  | 

그러나 테이블이 응답하기 때문에 열 수 (따라서 행 수)가 변경 될 수 있습니다. 예를 들어 .col-md-3을 사용하여 행별로 트위터 부트 스트랩을 실행하고 여분의 항목을 다음 행으로 넘치게하면 쉽게 대응할 수 있습니다. 그러나 테이블 을 세로로 열으로 채 웁니다.

CSS만으로이 작업을 수행 할 수 있습니까 (예 : 재정렬 및 ​​자바 스크립트를 사용하지 않고도).

Answer 1

이 매우 간단합니다, 당신은 여전히 ​​다음과 같이 부트 스트랩을 사용할 수 있습니다, 그러나

<div class="mydata col-lg-3 col-md-3 col-sm-6 col-xs-12"><ul><li>Abi</li> <li>Boris<li> <li> Charlie</li></ul></div> 

당신이 반대를 원한다면, 당신의 CSS에 다음

<div class="mydata col-lg-12 col-md-6 col-sm-3 col-xs-6"><ul><li>Abi</li> <li>Boris<li> <li> Charlie</li></ul></div> 

을 시도

.mydata ul{display:block;} 
.mydata li{display:inline-block;}