xPage 테이블의 테두리를 제거하는 방법

Question

첫 번째 질문은 : 실제로 테이블을 정렬/정리할 필요가 있습니까? 양식/페이지에서 구성 요소를 그룹화하는 데 도움이되는 오래된 스타일 개발 (숨겨진 테이블 사용)과 비슷합니다. 어쨌든 Notes 8에서 Notes 9로 전환하고 Bootstrap 3 테마를 적용했습니다. 이제 모든 테이블에 제거 할 수없는 테두리가 있습니다. 이상한 일 이네. 내 자신의 수업조차 국경을 제거하지 못한다.

table, th, td { 
    border-collapse: collapse; 
} 

는 또한 나는 왼쪽 맞 및 바닥에서만 작동 국경 크기/색상을 설정하려고합니다. 나는 국경 크기 2 픽셀을 설정하면 그것은

table, th, td { 
    border: 1px solid black; 
} 

그래서 난 내 페이지에서 테이블 테두리를 제거 어떻게뿐만 아니라 위쪽 테두리의 색상을 설정합니다.

Answer 1

아래 그림은 당신의 CSS에 다음 줄을 추가를 참조하십시오 : 당신은 레이블과 필드를 정렬하기 위해 테이블이 필요하지 않습니다

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, 
.table>tbody>tr>td, .table>tfoot>tr>td { 
    border-top: 0px; 
} 

. "인라인 블록을 표시"하고 적절한 너비를 설정 : 스타일을 사용하여 레이블과 필드

<xp:label 
    value="Label1" 
    id="label1" 
    for="inputText1" 
    style="width:20%;display:inline-block;"> 
</xp:label> 
<xp:inputText 
    id="inputText1" 
    value="#{sessionScope.input1}" 
    style="width:75%;display:inline-block;"> 
</xp:inputText> 

를 사용하여 별도의 클래스를 그 스타일을 응용 프로그램의 모든 라벨/필드에 동일한 정렬을 설정합니다.

Answer 2

부트 스트랩 테마로 이동하면 테이블을 정렬 할 필요가 없으며 모바일 장치에 적응할 수있는 반응 형 디자인을 만들 수 있습니다.