Development Tip

트위터 부트 스트랩에서 행 줄 제거

yourdevel 2020. 10. 25. 13:10
반응형

트위터 부트 스트랩에서 행 줄 제거


강제로 수행해야하는 일부 웹 앱에 트위터 부트 스트랩을 사용하고 있으며 (웹 개발자가 아닙니다) 테이블의 행 행을 비활성화하는 방법을 찾을 수 없습니다.

Bootstrap 문서 에서 알 수 있듯이 기본 테이블 스타일에는 행 행이 포함됩니다.

문안 인사,


다음을 기본 CSS에 추가하십시오.

table td {
    border-top: none !important;
}

최신 버전의 부트 스트랩에 사용하십시오.

.table th, .table td { 
     border-top: none !important; 
 }

Bootstrap 3에서 저는 table-no-border 클래스를 추가했습니다.

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

bootstrap.min.css는 .table td를 사용하는 경우 자신의 스타일 시트보다 더 구체적입니다. 따라서 대신 사용하십시오.

.table>tbody>tr>th, .table>tbody>tr>td {
    border-top: none;
}

이것이 저에게 효과적이었습니다 ..

.table-no-border>thead>tr>th, 
.table-no-border>tbody>tr>th, 
.table-no-border>tfoot>tr>th, 
.table-no-border>thead>tr>td, 
.table-no-border>tbody>tr>td, 
.table-no-border>tfoot>tr>td,
.table-no-border>tbody,
.table-no-border>thead,
.table-no-border>tfoot{
  border-top: none !important; 
  border-bottom: none !important; 
}

그것을 찌르기 위해 중요한 것을 채찍질해야했습니다.


친구에게서 같은 질문을 받았습니다. 필요하지 않은 내 제안은 !Important다음과 같습니다. no-border부트 스트랩 테이블에 추가 할 수 있는 사용자 정의 클래스 " "를 추가합니다.

.table.no-border tr td, .table.no-border tr th {
  border-width: 0;
}

여기 에서 해결책을 찾을 수 있습니다.


반대로, 패널에 줄을 추가하는 데 문제가있는 경우을 테이블에 추가하는 것을 잊지 마십시오. 기본적으로 ( http://getbootstrap.com/components/#panels ), 줄을 추가한다고 가정하지만 태그를 추가하는 데 도움이되었으므로 이제 행 줄이 표시됩니다.

다음 예제는 "아마도"행 사이의 줄을 표시하지 않습니다.

<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <!-- Table -->
    <table class="table">
        <tr><td> Hi 1! </td></tr>
        <tr><td> Hi 2! </td></tr>
    </table>
</div>

다음 예는 행 사이의 행을 표시합니다.

<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <!-- Table -->
    <table class="table">
        <thead></thead>
        <tr><td> Hi 1! </td></tr>
        <tr><td> Hi 2! </td></tr>
    </table>
</div>

참고 URL : https://stackoverflow.com/questions/8875367/remove-row-lines-in-twitter-bootstrap

반응형