ตาราง Bootstrap ที่ไม่มีแถบ / เส้นขอบ

ฉันติดอยู่กับปัญหา CSS ในขณะที่ใช้ Bootstrap ฉันใช้ Angular JS กับ Angular UI.bootstrap (ซึ่งอาจเป็นส่วนหนึ่งของปัญหา)

ฉันกำลังสร้างเว็บไซต์ที่แสดงข้อมูลในตาราง บางครั้งข้อมูลมีวัตถุที่ฉันต้องแสดงในตาราง ดังนั้นฉันต้องการที่จะวางตารางไร้ขอบไว้ในตารางปกติในขณะที่ยังคงอยู่ในบรรทัดการแยกสำหรับตารางที่ไม่มีขอบ

แต่ดูเหมือนว่าแม้ว่าฉันบอกว่าจะไม่แสดงเส้นขอบบนโต๊ะโดยเฉพาะมันก็ถูกบังคับ:

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>แท็กของคุณ จาก Bootstrap docs ในตาราง :

สำหรับการจัดแต่งทรงผม padding แสงขั้นพื้นฐานและเพียงวงเวียนแนวนอนเพิ่มชั้นฐานใด ๆ.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

ผ่านการทดสอบและใช้งานได้! เส้นขอบและช่องว่างภายในทั้งหมดถูกถอดออกอย่างสมบูรณ์

ฉันขยายสไตล์ตาราง Bootstrap อย่างที่ 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 ของคุณกำหนดเป้าหมายไปยังตารางในตาราง. ไร้ขอบ (ซึ่งอาจไม่มีอยู่)

ฉันรู้ว่านี่เป็นหัวข้อเก่าและคุณเลือกคำตอบแล้ว แต่ฉันคิดว่าฉันโพสต์ข้อความนี้เนื่องจากเกี่ยวข้องกับคนอื่นที่กำลังดูอยู่

ไม่มีเหตุผลที่จะสร้างกฎ 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-borderedไป.tableเพียง wraps ตารางที่มีชายแดนแม้ว่าโดยการเพิ่มเส้นขอบแบบเต็มไปยังทุกเซลล์

แต่การลบ.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-borderlessไม่ทำงานกับแหล่งที่มา 4.0 ของฉัน (เช่นข้อผิดพลาดของผู้ปฏิบัติงาน duh) 💩

ในบางกรณีหนึ่งต้องใช้ระยะห่างชายแดนในระดับตารางเช่น:

ระยะห่างระหว่างเส้นขอบ: 0! สำคัญ

ติดตั้ง bootstrap โดยใช้ลิงก์ 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>

รับการอ้างอิงด้วยลิงค์นี้