jQuery Mobile에서 행 주위에 테두리를 넣는 방법

Question

HTML 테이블에서 테이블 리플 로우를 사용하고 있습니다. 나는 단순히 테이블의 행 주위에 테두리를 넣으려고합니다. 내가 크롬을 통해 요소를 검사 및 jQuery를 모바일 테이블에 다음 클래스를 추가 것을 볼 때 :

ui-responsive table-stroke ui-table ui-table-reflow 

따라서 나는 다음과 같은 스타일을 추가 보았다 :

.ui-responsive .table-stroke .ui-table .ui-table-reflow tr 
{ 
    border-style:solid; 
    border-width:5px; 
} 

그러나 일부 난 여전히 '돈 방법 화면 크기에 관계없이 행 주위에 테두리를 가져옵니다. 어떤 아이디어를 얻을 수 있었는지 어떻게 생각합니까?

Answer 1

당신의 설명에 따르면 개별 셀이 아닌 전체 너비의 행 주위에만 경계선이 있어야한다고 가정하고 테이블이 다시 리플 로우하면 각 행 (실제로는 셀이 별도의 행에 표시됨). 그렇다면 여기

미디어 쿼리 테이블이 더 넓은 화면에서 볼 때입니다의 CSS에서는 DEMO

입니다. 이 경우 TR (행)에 테두리를 지정하고 셀 테두리를 0으로 설정합니다. 화면이 좁고 테이블이 리플 로우하면 TR 경계가 0이고 TD 경계가 설정됩니다. 데모에서 CSS로 게임을해야 원하는 것을 얻을 수 있습니다.

.ui-table tr { 
    border: 0px solid rgb(51,51,51); 
} 
.ui-table-reflow.ui-responsive td, .ui-table-reflow.ui-responsive th { 
    border: 2px solid rgb(51,51,51); 
    border-left:4px solid rgb(51,51,51); 
    border-right:4px solid rgb(51,51,51); 
} 
.ui-table-reflow.ui-responsive td:first-child, .ui-table-reflow.ui-responsive th:first-child { 
    border-top:4px solid rgb(51,51,51); 
} 
.ui-table-reflow.ui-responsive td:last-child, .ui-table-reflow.ui-responsive th:last-child { 
    border-bottom:4px solid rgb(51,51,51); 
} 


@media (min-width: 35em) { 
    .ui-table tr { 
     border: 4px solid rgb(51,51,51); 
    } 

    .ui-table-reflow.ui-responsive td, .ui-table-reflow.ui-responsive th { 
     border: 0; 
    } 
}