ฉันจะใช้เส้นขอบภายในตารางได้อย่างไร

195

ฉันกำลังพยายามหาวิธีเพิ่มเส้นขอบในตารางเท่านั้น เมื่อฉันทำ:

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

เส้นขอบอยู่รอบทั้งตารางและระหว่างเซลล์ตาราง สิ่งที่ฉันต้องการบรรลุคือมีขอบเฉพาะภายในตารางรอบ ๆ เซลล์ตาราง (ไม่มีขอบด้านนอกรอบ ๆ ตาราง)

นี่คือมาร์กอัปที่ฉันใช้สำหรับตาราง (แม้ว่าฉันคิดว่าไม่สำคัญ):

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

และนี่คือลักษณะพื้นฐานบางอย่างที่ฉันใช้กับตารางส่วนใหญ่ของฉัน:

table {
    border-collapse: collapse;
    border-spacing: 0;
}

— Richard Knop
แหล่งที่มา

ฉันเห็นเพียงพรมแดนรอบ ๆ เซลล์เท่านั้น เนื่องจากแต่ละเซลล์มีเส้นขอบปรากฏว่าตารางมีเส้นขอบ บางทีฉันอาจไม่ได้รับคำถาม?

— Chetan S

3

นอกจากนี้ยังเรียกว่าเขตชายแดน

— หอยทากเครื่องกล

203

หากคุณกำลังทำสิ่งที่ฉันเชื่อว่าคุณพยายามจะทำคุณจะต้องมีอะไรบางอย่างมากกว่านี้

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

การสาธิต jsFiddle

ปัญหาคือคุณกำลังตั้งค่า 'เส้นขอบเต็ม' รอบ ๆ เซลล์ทั้งหมดซึ่งทำให้มันดูเหมือนว่าคุณมีเส้นขอบรอบทั้งตาราง

ไชโย

แก้ไข: ข้อมูลเพิ่มเติมเล็กน้อยเกี่ยวกับชั้นเรียนหลอกเหล่านั้นสามารถพบได้ในโหมด quirksmodeและตามที่คาดไว้คุณจะ SOL ค่อนข้างมากในแง่ของการสนับสนุน IE

— theIV
แหล่งที่มา

ด้วยตารางอย่างง่ายเช่นนี้มีวิธีแก้ปัญหาที่สั้นกว่ามากซึ่งหลีกเลี่ยงการใช้คลาสหลอกโดยใช้ combinator พี่น้องคนต่อไป ดูคำตอบของฉัน

— dalgard

1

@theIV เมื่อคำตอบนี้มีมากกว่า 5 ปีที่ผ่านมามีวิธีการใดที่ 'ใหม่' / 'มีประสิทธิภาพมากขึ้น' หรือไม่?

— jbutler483

ไม่ทำงานหากคุณเคยใช้ rowspan ในคอลัมน์แรกในตาราง

— แจ็ค

192

สิ่งนี้ใช้ได้กับฉัน:

table {
    border-collapse: collapse;
    border-style: hidden;
}

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

ดูตัวอย่าง ...

ทดสอบใน FF 3.6 และ Chromium 5.0, IE ขาดการสนับสนุน จากW3C :

เส้นขอบที่มี 'ลักษณะเส้นขอบ' ของ 'ซ่อน' จะมีความสำคัญเหนือกว่าเส้นขอบที่ขัดแย้งกันทั้งหมด เส้นขอบที่มีค่านี้จะไม่แสดงเส้นขอบทั้งหมดที่ตำแหน่งนี้

— anthonyrisinger
แหล่งที่มา

1

ตราบใดที่คุณไม่ต้องการเส้นขอบโต๊ะนี่เป็นทางออกที่ดีที่สุดแน่นอน

— cjroth

42

ตัวอย่างวิธีที่ง่ายมากสำหรับคุณในการสร้างเอฟเฟกต์ที่ต้องการ:

<table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>

— Jony
แหล่งที่มา

13

อธิบาย "MAGIC": frameและrulesเป็นแอตทริบิวต์OLD (ไม่ใช่ HTML5) table (คุณควรใช้ CSS แทน) frameบอกว่าส่วนใดของเส้นขอบตารางด้านนอกที่ควรมองเห็น - voidหมายถึงซ่อนขอบนอกทั้งหมด ... rulesบอกว่าส่วนของขอบตารางด้านในควรจะมองเห็นได้ - allหมายถึงเส้นขอบทั้งหมด ... ชัด ๆ ... โปรดอย่าใช้สิ่งนี้ยกเว้นคุณ เป็นแฟน

— พันธุ์แท้ของ

1

การเพิ่มบางอย่างเช่นเส้นขอบ: สีดำทึบ 1px จะทำให้แน่ใจว่าขอบเขตด้านนอกของตารางได้รับเส้นขอบ

— Aaron Liu

1

ทำงานเหมือนมีเสน่ห์ในปี 2020 เพื่อเพิ่มความสามารถในการอ่านลงในตารางที่เว้นระยะในเว็บไซต์ที่ฉันอ่าน อันที่จริงเพียงแค่นี้ก็เพียงพอสำหรับขอบเขตภายใน: rules = "all"

— Edoardo Facchinelli

11

เนื่องจากความเข้ากันได้ของ mantain กับ ie7, ie8 ฉันขอแนะนำให้ใช้ลูกคนแรกและไม่ใช่ลูกคนสุดท้ายในการทำสิ่งนี้:

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}

table tr td:first-child{border-left:0;}

table tr:first-child td{border-top:0;}

คุณสามารถเรียนรู้เกี่ยวกับ CSS 2.1 Pseudo-classes ได้ที่: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

— Crisboot
แหล่งที่มา

นี่เป็นทางออกที่ดี แต่ระวังถ้าคุณมีตารางอื่นในเซลล์หนึ่งในตารางของคุณและต้องการดูเส้นขอบด้านในคุณต้องมีชุด CSS บรรทัดอื่นสำหรับตาราง "Inner" ของคุณ

— Michael Biermann

10

สำหรับมาร์กอัพตารางทั่วไปนี่เป็นวิธีแก้ปัญหาสั้น ๆ ที่ใช้กับอุปกรณ์ / เบราว์เซอร์ทั้งหมดใน BrowserStack ยกเว้น IE 7 และต่ำกว่า:

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

สำหรับการรองรับ IE 7 ให้เพิ่มสิ่งนี้:

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

กรณีทดสอบสามารถดูได้ที่นี่: http://codepen.io/dalgard/pen/wmcdE

— dalgard
แหล่งที่มา

ยอดเยี่ยม - เนื่องจากเป็นส่วนที่อนุญาตให้ตั้งค่าขอบที่แตกต่างกันไปยังตาราง

— jsbueno

5

สิ่งนี้ควรใช้งานได้:

table {
 border:0;
}

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

แก้ไข:

ฉันแค่ลองมันไม่มีขอบโต๊ะ แต่ถ้าฉันตั้งค่าขอบตารางมันจะถูกกำจัดโดยการยุบขอบ

นี่คือไฟล์ทดสอบ:

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


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


</style>
</head>
<body>
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

</body>
</html>

— Rufinus
แหล่งที่มา

ไม่ได้ฉันไม่ได้ลอง ฉันจะแก้ไขโพสต์แรกของฉัน

— Richard Knop

3

ที่จะทำมันทั้งหมดโดยไม่ต้อง CSS <TABLE BORDER=1 RULES=ALL FRAME=VOID>

โค้ดจาก: โค้ด HTML ของการสอน

— TwoFaceZ
แหล่งที่มา

0

เพิ่มเส้นขอบให้กับแต่ละเซลล์ด้วยสิ่งนี้:

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

ลบเส้นขอบด้านบนออกจากเซลล์ทั้งหมดในแถวแรก:

table > tbody > tr:first-child > td { border-top: 0; }

ลบเส้นขอบด้านซ้ายออกจากเซลล์ในคอลัมน์แรก:

table > tbody > tr > td:first-child { border-left: 0; }

ลบเส้นขอบด้านขวาออกจากเซลล์ในคอลัมน์สุดท้าย:

table > tbody > tr > td:last-child { border-right: 0; }

ลบเส้นขอบด้านล่างออกจากเซลล์ในแถวสุดท้าย:

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/

— ไบรอัน
แหล่งที่มา

0

ใช้งานได้กับการรวมกันของ tbody / thead / tfoot และ td / th

table.inner-border {
    border-collapse: collapse;
    border-spacing: 0;
}

table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
    border-right: 0;
}

table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
    border-bottom: 0;
}

<table class="inner-border">
    <thead>
    <tr>
        <th>head1,1</th>
        <td>head1,2</td>
        <td>head1,3</td>
    </tr>
    <tr>
        <td>head2,1</td>
        <td>head2,2</td>
        <th>head2,3</th>
    </tr>
    </thead>
    <tr>
        <td>1,1</td>
        <th>1,2</th>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
        <td>3,3</td>
    </tr>
    <thead>
    <tr>
        <th>foot1,1</th>
        <td>foot1,2</td>
        <td>foot1,3</td>
    </tr>
    <tr>
        <td>foot2,1</td>
        <th>foot2,2</th>
        <th>foot2,3</th>
    </tr>
    </thead>
</table>

ขยายตัวอย่างข้อมูล

— user1119279
แหล่งที่มา