행처럼 보이도록 <th> 내의 데이터를 정렬하는 방법은 무엇입니까?

키란

<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] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

표처럼 보이도록 표시된 데이터를 정렬하는 방법은 무엇입니까?

분류에서Dev

내 테이블의 td를 th와 정렬하는 방법은 무엇입니까?

분류에서Dev

C #의 HtmlTable에서 데이터를 추출하고 행으로 정렬하는 방법은 무엇입니까?

분류에서Dev

데이터 세트를 특정 유형의 행렬로 변환하는 방법은 무엇입니까? (RStudio)

분류에서Dev

앱처럼 웹 페이지를 실행하는 방법은 무엇입니까?

분류에서Dev

Cronbach의 알파 "데이터는 데이터 프레임 또는 행렬이어야합니다"오류를 처리하는 방법은 무엇입니까?

분류에서Dev

Pandas 데이터 프레임에서 특정 행의 값을 정렬하는 방법은 무엇입니까?

분류에서Dev

행 아웃 또는 페이스 북 채팅의 메시지 상자처럼 div가 작동하도록 만드는 방법은 무엇입니까?

분류에서Dev

왜 내 컬렉터 방법은 평행 데이터를 처리되지 않는 이유는 무엇입니까?

분류에서Dev

IC 파일의 데이터를 내보내는 방법은 무엇입니까?

분류에서Dev

연결된 것처럼 보이도록 문자열 변수를 축소하는 방법은 무엇입니까?

분류에서Dev

조건에 따라 Pandas 데이터 프레임의 행 값을 정렬하는 방법은 무엇입니까?

분류에서Dev

HTML에서 특정 테이블 행의 데이터를 업데이트하는 방법은 무엇입니까?

분류에서Dev

CSS로 디자인 된 두 개의 div를 텍스트 거품처럼 보이도록 오버레이 / 겹치는 방법은 무엇입니까?

분류에서Dev

Python : Pandas가 데이터 세트의 열을 정렬하도록 강제하는 방법은 무엇입니까?

분류에서Dev

CSV 데이터의 curl POST를 수행하는 방법은 무엇입니까?

분류에서Dev

지도 축소에서 데이터를 내림차순으로 정렬하는 방법은 무엇입니까?

분류에서Dev

파티션 내에서 테이블의 행을 정렬하는 방법은 무엇입니까?

분류에서Dev

룸 데이터베이스에서 LiveData를 정렬하는 방법은 무엇입니까? recyclerview의 항목 순서를 전환하는 버튼 수행

분류에서Dev

Swift : 탭한 것처럼 보이도록 imageView 색상을 변경하는 방법은 무엇입니까?

분류에서Dev

R에서 countif를 수행하고 데이터를 내보내는 방법은 무엇입니까?

분류에서Dev

React를 사용하여 목록의 데이터를 양식으로 보내는 방법은 무엇입니까?

분류에서Dev

벨로에 이미지처럼 정확히 읽기를 수행하는 방법은 무엇입니까?

분류에서Dev

처음 XGB의 데이터를 찾는 방법은 무엇입니까?

분류에서Dev

소켓에서 데이터를받은 후 useEffect ()가 내 로컬 상태를 재설정하는 것처럼 보이는 이유는 무엇입니까?

분류에서Dev

데이터베이스 내부의 열로 테이블을 정렬하는 방법은 무엇입니까?

분류에서Dev

DataTable의 필터 입력이 아닌 DataTable 서버 측 처리로 사용자 지정 데이터를 보내는 방법은 무엇입니까?

분류에서Dev

행 또는 열의 특정 데이터를 조정하는 방법은 무엇입니까?

분류에서Dev

축선 사이의 상자에있는 단순 행렬 데이터의 마크 위치를 지정하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    표처럼 보이도록 표시된 데이터를 정렬하는 방법은 무엇입니까?

  2. 2

    내 테이블의 td를 th와 정렬하는 방법은 무엇입니까?

  3. 3

    C #의 HtmlTable에서 데이터를 추출하고 행으로 정렬하는 방법은 무엇입니까?

  4. 4

    데이터 세트를 특정 유형의 행렬로 변환하는 방법은 무엇입니까? (RStudio)

  5. 5

    앱처럼 웹 페이지를 실행하는 방법은 무엇입니까?

  6. 6

    Cronbach의 알파 "데이터는 데이터 프레임 또는 행렬이어야합니다"오류를 처리하는 방법은 무엇입니까?

  7. 7

    Pandas 데이터 프레임에서 특정 행의 값을 정렬하는 방법은 무엇입니까?

  8. 8

    행 아웃 또는 페이스 북 채팅의 메시지 상자처럼 div가 작동하도록 만드는 방법은 무엇입니까?

  9. 9

    왜 내 컬렉터 방법은 평행 데이터를 처리되지 않는 이유는 무엇입니까?

  10. 10

    IC 파일의 데이터를 내보내는 방법은 무엇입니까?

  11. 11

    연결된 것처럼 보이도록 문자열 변수를 축소하는 방법은 무엇입니까?

  12. 12

    조건에 따라 Pandas 데이터 프레임의 행 값을 정렬하는 방법은 무엇입니까?

  13. 13

    HTML에서 특정 테이블 행의 데이터를 업데이트하는 방법은 무엇입니까?

  14. 14

    CSS로 디자인 된 두 개의 div를 텍스트 거품처럼 보이도록 오버레이 / 겹치는 방법은 무엇입니까?

  15. 15

    Python : Pandas가 데이터 세트의 열을 정렬하도록 강제하는 방법은 무엇입니까?

  16. 16

    CSV 데이터의 curl POST를 수행하는 방법은 무엇입니까?

  17. 17

    지도 축소에서 데이터를 내림차순으로 정렬하는 방법은 무엇입니까?

  18. 18

    파티션 내에서 테이블의 행을 정렬하는 방법은 무엇입니까?

  19. 19

    룸 데이터베이스에서 LiveData를 정렬하는 방법은 무엇입니까? recyclerview의 항목 순서를 전환하는 버튼 수행

  20. 20

    Swift : 탭한 것처럼 보이도록 imageView 색상을 변경하는 방법은 무엇입니까?

  21. 21

    R에서 countif를 수행하고 데이터를 내보내는 방법은 무엇입니까?

  22. 22

    React를 사용하여 목록의 데이터를 양식으로 보내는 방법은 무엇입니까?

  23. 23

    벨로에 이미지처럼 정확히 읽기를 수행하는 방법은 무엇입니까?

  24. 24

    처음 XGB의 데이터를 찾는 방법은 무엇입니까?

  25. 25

    소켓에서 데이터를받은 후 useEffect ()가 내 로컬 상태를 재설정하는 것처럼 보이는 이유는 무엇입니까?

  26. 26

    데이터베이스 내부의 열로 테이블을 정렬하는 방법은 무엇입니까?

  27. 27

    DataTable의 필터 입력이 아닌 DataTable 서버 측 처리로 사용자 지정 데이터를 보내는 방법은 무엇입니까?

  28. 28

    행 또는 열의 특정 데이터를 조정하는 방법은 무엇입니까?

  29. 29

    축선 사이의 상자에있는 단순 행렬 데이터의 마크 위치를 지정하는 방법은 무엇입니까?

뜨겁다태그

보관