스트라이프 / 테두리가없는 부트 스트랩 테이블

Bootstrap을 사용하는 동안 CSS 문제가 발생했습니다. 또한 Angular UI.bootstrap과 함께 Angular JS를 사용하고 있습니다 (문제의 일부일 수 있음).

테이블에 데이터를 표시하는 웹 사이트를 만들고 있습니다. 때로는 데이터에 테이블에 표시 해야하는 객체가 포함되어 있습니다. 따라서 경계가없는 테이블의 구분선을 유지하면서 경계가없는 테이블을 일반 테이블 안에 넣습니다.

그러나 테이블에 테두리를 표시하지 않는다고 말하더라도 강제로 보입니다.

HTML :

<table class='table borderless'>

CSS :

.borderless table {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

여기에서 내가 원하는 것은 내부 테두리입니다.

테두리 스타일은 td요소에 설정됩니다 .

html :

<table class='table borderless'>

CSS :

.borderless td, .borderless th {
    border: none;
}

업데이트 : Bootstrap 4.1부터 .table-borderless테두리를 제거하는 데 사용할 수 있습니다 .

https://getbootstrap.com/docs/4.1/content/tables/#borderless-table

Bootstrap 3.2.0을 사용하면 Brett Henderson 솔루션 (테두리가 항상있었습니다)에 문제가있어서 개선했습니다.

HTML

<table class="table table-borderless">

CSS

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

나머지와 비슷하지만 더 구체적입니다.

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

.table클래스를 <table>태그에 추가하지 마십시오 . 테이블 의 부트 스트랩 문서에서 :

기본 스타일링 (라이트 패딩 및 가로 구분선 만 해당)의 경우 기본 클래스 .table를에 추가하십시오 <table>. 중복되는 것처럼 보일지 모르지만 캘린더 및 날짜 선택기와 같은 다른 플러그인에 테이블을 널리 사용함에 따라 사용자 정의 테이블 스타일을 분리하기로 결정했습니다.

Bootstrap v4.1부터 table-borderless테이블에 추가 할 수 있습니다 . 공식 문서를 참조하십시오 .

<table class='table table-borderless'>

내 CSS에서 :

.borderless tr td {
    border: none !important;
    padding: 0px !important;
}

내 지시에서 :

<table class='table borderless'>
    <tr class='borderless' ....>

나는 td 요소에 '무국적'을 넣지 않았습니다.

테스트하고 작동했습니다! 모든 테두리와 패딩이 완전히 제거되었습니다.

Davide Pastore와 마찬가지로 Bootstrap 테이블 스타일을 확장했지만이 방법을 사용하면 스타일이 모든 자식 테이블에도 적용되고 바닥 글에는 적용되지 않습니다.

더 나은 솔루션은 핵심 부트 스트랩 테이블 스타일을 모방하지만 새로운 클래스를 사용하는 것입니다.

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

그런 다음 <table class='table table-borderless'>클래스와 함께 특정 테이블 만 사용 하면 트리의 테이블이 아닌 테두리가 생깁니다.

이 시도:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

참고 : CSS 코드가 .borderless 테이블 (아마도 존재하지 않음) 내의 테이블을 대상으로했기 때문에 이전에 수행 한 작업이 작동하지 않았습니다.

나는 이것이 오래된 스레드라는 것을 알고 있으며 당신이 답을 골랐다는 것을 알고 있지만, 현재 찾고있는 다른 사람과 관련이 있기 때문에 이것을 게시 할 것이라고 생각했습니다.

새로운 CSS 규칙을 만들 이유가 없습니다. 단순히 현재 규칙을 취소하면 테두리가 사라집니다.

    .table> tbody> tr> th,
    .table> tbody> tr> td {
        국경 상단 : 0;
    }

앞으로 어떤 스타일로든

    .표

테두리가 표시되지 않습니다.

border-Boostrap 4 의 수업 사용

<td class="border-0"></td>

또는

<table class='table border-0'></table>

마지막으로 변경하려는 클래스 입력을 종료하십시오.

이것은 나를 위해 일했습니다.

<td style="border-top: none;">;

열쇠는 당신이에 테두리 상단을 추가해야합니다 <td>

여기 게임에 늦었 어하지만 FWIW는 : 추가 .table-borderedA를 .table바로하는 것은 모든 세포에 전체 국경을 추가하여이기는하지만, 테두리와 테이블을 래핑합니다.

그러나 .table-bordered여전히 제거 하면 규칙이 남습니다. 의미 론적 문제이지만 BS3 + 명명법에 따라이 일련의 재정의를 사용했습니다.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-5">
      .table
      <table class="table">
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <table class="table table-bordered">
        .table .table-bordered
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-5">
      <table class="table table-unruled">
        .table .table-unruled
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <table class="table table-bordered table-unruled">
        .table .table-bordered .table-unruled
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>

hidden대신에 사용하십시오 none:

.hide-bottom {
    border-bottom-style: hidden;
}

대부분의 예는 너무 구체적이고 부풀어 오른 것 같습니다.

다음은 Bootstrap 4.0.0 (4.1 포함 .table-borderless하지만 여전히 알파)을 사용하여 정리 된 솔루션입니다 ...

.table-borderless th{border:0;}
.table-borderless td{border:0;}

많은 제안 된 솔루션과 유사하지만 최소 바이트 😉

참고 : BS4.1 참조를보고 있었기 때문에 여기에서 끝났으며 .table-borderless4.0 소스로 작동하지 않는 이유를 알 수 없었습니다 (예 : operator error, duh) 💩

어떤 경우에는 다음과 같이 테이블 클래스에서 경계 간격을 사용해야합니다.

경계 간격 : 0! 중요;

npm 또는 cdn 링크로 부트 스트랩 설치

<table class="table table-borderless">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
  </tr>
  <tr>
  <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
   </tr>
 </tbody>
</table>

이 링크로 참조를 얻으십시오