<th>
동일한 수준으로 보이도록 행과 같이 테이블 내 에서 텍스트를 정렬하고 싶습니다 . 지금은 제목이 기복처럼 보입니다. 그래서 그것을 행으로 올바르게보고 싶습니다.
예를 들어 Americas Center, Asheville, ..., Coopersville과 같은 제목은 한 행에 표시되어야합니다. 두 번째 줄에서 XX %; 운영 가능 : 세 번째 행의 xxxx; 등록됨 : xxxxx가 네 번째 행에 있습니다.
결과는 다음과 같아야합니다.
그러나 <th>
배경색을 동일하게 유지하고 다른 행과 같이 테두리가 없어야합니다.
<br/>
텍스트를 분리하는 데 사용 했지만 적절하게 정렬 된 모양을 제공하지 않습니다. 어떻게하나요? 데이터 <th>
를 행 으로 표시하는 방법이 있습니까?
코드는 여기에서 찾을 수 있습니다 : https://jsfiddle.net/kirankapur/dka361qz/
줄 바꿈을 사용하여 텍스트를 행으로 정렬하는 대신 각 요소 집합에 대해 별도의 tr
블록, 캡션, 적격 상태 및 등록됨 상태에 대해 별도의 블록을 사용하여 테이블 행의 각 요소 집합을 래핑 합니다.
당신이 포장에서 텍스트를 유지하려는 경우, 당신은 그것을 포장 할 수 div
사용 white-space: nowrap
.
, 국경을 다루는 집합 기억 border=0
하고 cellspacing=0
테이블 태그에 (당신은 CSS에서이 작업을 수행 할 수있을하지만 난 습관에서 년 동안이 재설정을 사용하고있다 그리고 그것은 작동).
참조 : https://jsfiddle.net/audetwebdesign/0rkvtncm/
참고 : 스타일 지정을 정밀하게 제어하기 위해 텍스트의 다양한 구성 요소를 선택하는 방법을 설명하기 위해 헤더에 색상 값을 추가했습니다.
추가 스타일 : 헤더 영역 외부의 테이블 셀에 상단 및 하단 테두리를 추가하려면 다음 CSS 규칙을 추가 할 수 있습니다.
table.local tbody.table-hover td {
border-top: 1px dashed blue;
}
table.local tbody.table-hover tr:last-child td {
border-bottom: 1px dashed blue;
}
CSS 테두리 속성은 상속되지 않습니다. tr
요소에 테두리 속성을 적용 해도 효과가 없습니다. border 속성은 td
(또는 th
) 요소 에 직접 적용해야합니다 .
jsfiddle 데모에 테두리를 추가했습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다