ระยะขอบเซลล์ CSS


96

ในเอกสาร HTML ของฉันฉันมีตารางที่มีสองคอลัมน์และหลายแถว ฉันจะเพิ่มช่องว่างระหว่างคอลัมน์แรกและคอลัมน์ที่สองด้วย css ได้อย่างไร ฉันได้ลองใช้ "margin-right: 10px;" ไปยังแต่ละเซลล์ทางด้านซ้ายมือ แต่ไม่มีผลใด ๆ


มีโซลูชัน CSS ที่ดีที่นี่ปรับปรุงใหม่: stackoverflow.com/a/21551008/2827823
Ason

คำตอบ:


93

ใช้สิ่งนี้กับสิ่งแรกของคุณ<td>:

padding-right:10px;

ตัวอย่าง HTML:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

13
แนวทางที่ดีกว่าคือใช้การยุบชายแดน: แยก
Gaurav Ramanan

23
ในกรณีที่มีคนคัดลอก / วางเทคนิคการยุบเส้นขอบตามความคิดเห็นข้างต้นควรเป็นborder-collapse: separate(มีการสะกดผิดseparateด้านบน)
Tony DiNitto

1
นอกจากนี้หากคุณต้องการกำหนดจำนวนช่องว่างระหว่างพรมแดนคุณจะต้องใช้border-spacing: 5px;
SølveTornøe

border-spacingยังเพิ่มช่องว่างระหว่างแถว น่าเสียดายที่ไม่มีคุณสมบัติแยกกันสำหรับระยะห่างแนวตั้งและแนวนอน
Lee Blake

1
border-spacingรับสองอาร์กิวเมนต์ - หนึ่งสำหรับแนวนอนและอีกหนึ่งอาร์กิวเมนต์สำหรับแนวตั้ง
OldTinfoil

153

คำเตือน: แม้ว่าpadding-rightอาจแก้ปัญหาเฉพาะ (ภาพ) ของคุณได้ แต่ก็ไม่ใช่วิธีที่ถูกต้องในการเพิ่มระยะห่างระหว่างเซลล์ตาราง สิ่งที่padding-rightทำกับเซลล์นั้นคล้ายกับสิ่งที่ทำกับองค์ประกอบอื่น ๆ ส่วนใหญ่นั่นคือเพิ่มช่องว่างภายในเซลล์ หากเซลล์ไม่มีเส้นขอบหรือสีพื้นหลังหรืออย่างอื่นที่ทำให้เกมออกไปสิ่งนี้สามารถเลียนแบบผลกระทบของการกำหนดช่องว่างระหว่างเซลล์ได้

ตามที่มีคนตั้งข้อสังเกตข้อกำหนดระยะขอบจะถูกละเว้นสำหรับเซลล์ตาราง:

ข้อกำหนด CSS 2.1 - ตาราง - เค้าโครงภาพของเนื้อหาในตาราง

องค์ประกอบตารางภายในสร้างกล่องสี่เหลี่ยมพร้อมเนื้อหาและเส้นขอบ เซลล์มีช่องว่างภายในเช่นกัน องค์ประกอบตารางภายในไม่มีระยะขอบ

อะไรคือวิธีที่ "ถูกต้อง"? หากคุณต้องการแทนที่cellspacingแอตทริบิวต์ของตารางborder-spacing( border-collapseปิดการใช้งาน) จะเป็นการแทนที่ อย่างไรก็ตามหากต้องการ "ระยะขอบ" ต่อเซลล์ฉันไม่แน่ใจว่าจะทำได้อย่างถูกต้องโดยใช้ CSS ได้อย่างไร การแฮ็กเพียงอย่างเดียวที่ฉันคิดได้คือการใช้paddingข้างต้นหลีกเลี่ยงการจัดแต่งทรงผมของเซลล์ (สีพื้นหลังเส้นขอบ ฯลฯ ) และใช้คอนเทนเนอร์ DIV ภายในเซลล์แทนเพื่อใช้สไตล์ดังกล่าว

ฉันไม่ใช่ผู้เชี่ยวชาญด้าน CSS ดังนั้นฉันจึงอาจทำผิดในข้างต้นได้ (ซึ่งจะเป็นการดีที่จะรู้ว่าฉันต้องการโซลูชัน CSS ขอบเซลล์ตารางด้วยเช่นกัน)

ไชโย!


นี่เป็นสิ่งที่ยอดเยี่ยมและสำหรับการเติมเต็ม แต่สำหรับระยะขอบล่ะ? ฉันต้องการเพิ่มช่องว่างนอกเซลล์ที่มีเส้นขอบ Margin CSS ดูเหมือนจะไม่มีผลกับเซลล์
Levitikon

1
Levitikon ถูกต้อง - ระยะขอบไม่ทำงานด้วยเหตุผลข้างต้น วิธีเดียวที่จะได้รับสิ่งที่คุณต้องการ AFAIK คือการรวมเนื้อหาของเซลล์ใน DIV เพิ่มระยะขอบและเส้นขอบให้กับ DIV นั้นแทนที่จะเป็นเซลล์
ravi

ฉันโพสต์โซลูชัน CSS เมื่อนานมาแล้ว (อัปเดตแล้ววันนี้): stackoverflow.com/a/21551008/2827823
Ason

29

หากคุณไม่สามารถใช้ช่องว่างภายในได้ (เช่นคุณมีเส้นขอบเป็น td) ให้ลองทำเช่นนี้

table { 
           border-collapse: separate;
           border-spacing: 2px;
}

3
คุณสามารถตรวจสอบเพิ่มเติมเกี่ยวกับการยุบตัวของพรมแดน: แยกที่นี่css-tricks.com/almanac/properties/b/border-collapse
Gaurav

14

ฉันรู้ว่าสิ่งนี้ค่อนข้างล่าช้า แต่สำหรับเรกคอร์ดคุณยังสามารถใช้ตัวเลือก CSS เพื่อทำสิ่งนี้ได้ (ไม่จำเป็นต้องใช้สไตล์อินไลน์) CSS นี้ใช้ช่องว่างภายในคอลัมน์แรกของทุกแถว:

table > tr > td:first-child { padding-right:10px }

และนี่จะเป็น HTML ของคุณ, sans CSS!:

<table><tr><td>data</td><td>more data</td></tr></table>

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


14

ขอบใช้งานไม่ได้ในแต่ละเซลล์ แต่คุณสามารถเพิ่มคอลัมน์พิเศษระหว่างสองเซลล์ที่คุณต้องการเว้นวรรคระหว่าง ... อีกทางเลือกหนึ่งคือใช้เส้นขอบที่มีสีเดียวกับพื้นหลัง ...


ดูเหมือนว่าเส้นขอบจะมีปัญหาเช่นเดียวกับการเพิ่มช่องว่าง - เป็นการเพิ่มช่องว่างระหว่างเนื้อหาของเซลล์และขอบเขตไม่ใช่นอกขอบเขต
สตูเบสิ

11

คุณสามารถทำได้:

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

ไม่จำเป็นต้องใช้ CSS :) 10px นี้คือพื้นที่ของคุณ


นี่เป็นสิ่งที่ดีเรียบง่ายและมีประสิทธิภาพขอบคุณที่เตือนฉัน +1
Hayden Thring

8
นี่ไม่ใช่แนวทางที่ดีสำหรับการแยกโครงสร้างและการจัดแต่งทรงผม ไม่ใช่กรณีที่จำเป็นต้องใช้ CSS หรือไม่ - ควรใช้ CSS สำหรับสิ่งนี้
Simon Robb

ไม่ควร <td style = "width: 10px;"> </td>
Rune Jeppesen

1
อย่าลืมว่าวิธีแก้ปัญหาที่ง่ายที่สุดคือวิธีที่ดีที่สุด วิธีการแบบอินไลน์ก็ดีเช่นกัน :)
MrTrebor

มันใช้ได้กับกรณีเฉพาะของฉัน มีความคิดสร้างสรรค์มาก ขอบคุณ
Phan Van Linh

7

ลองpadding-right. คุณไม่ได้รับอนุญาตให้วางmarginระหว่างเซลล์

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>

4

ใช้เส้นขอบยุบ: แยก; ไม่ได้ผลสำหรับฉันเพราะฉันต้องการระยะขอบระหว่างเซลล์ตารางเท่านั้นที่ไม่ได้อยู่ด้านข้างของตาราง

ฉันคิดวิธีแก้ปัญหาต่อไป:

- CSS

.tableDiv{
    display: table;
}

.cellSeperator {
    display: table-cell;
    width: 20px;
}

.cell1 {
    display: table-cell;
    width: 200px;
}

.cell2 {
    display: table-cell;
    width: 50px;
}

- HTML

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>

4

โซลูชันนี้ใช้ได้กับtdผู้ที่ต้องการทั้งborderและpaddingสำหรับจัดแต่งทรงผม
(ทดสอบบน Chrome 32, IE 11, Firefox 25)

CSS:
table {border-collapse: separate; border-spacing:0; }   /*  separate needed      */
td { display: inline-block; width: 33% }  /*  Firefox need inline-block + width  */
td { position: relative }                 /*  needed to make td move             */
td { left: 10px; }                        /*  push all 10px                      */
td:first-child { left: 0px; }             /*  move back first 10px               */
td:nth-child(3) { left: 20px; }           /*  push 3:rd another extra 10px       */

/*  to support older browsers we need a class on the td's we want to push
    td.col1 { left: 0px; }
    td.col2 { left: 10px; }
    td.col3 { left: 20px; }
*/

HTML:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

อัปเดตเมื่อปี 2559

ตอนนี้ Firefox สนับสนุนโดยไม่มีinline-blockและชุดwidth

table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }


/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }
<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>


นอกจากนี้ยังใช้ได้กับตาราง css (display: table *) ที่สร้างจาก divs
Necreaux

2

คุณไม่สามารถแยกคอลัมน์แต่ละคอลัมน์ในเซลล์ในลักษณะนั้นได้ ในความคิดของฉันตัวเลือกที่ดีที่สุดของคุณคือการเพิ่มstyle='padding-left:10px'ในคอลัมน์ที่สองและใช้สไตล์กับ div หรือองค์ประกอบภายใน ด้วยวิธีนี้คุณสามารถบรรลุภาพลวงตาของพื้นที่ขนาดใหญ่


2

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

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

หมายเหตุความกว้างของตารางต้องรวมความกว้างของช่องว่าง / ระยะขอบด้วย จากตัวอย่างด้านบนความกว้างของตารางจะเป็น 700px

นี่ไม่ใช่วิธีแก้ปัญหาที่ดีที่สุดหากคุณใช้เส้นขอบบนเซลล์ตาราง


2

วิธีการแก้

ฉันพบวิธีที่ดีที่สุดในการแก้ปัญหานี้คือการลองผิดลองถูกและการอ่านสิ่งที่เขียนต่อหน้าฉัน:

http://jsfiddle.net/MG4hD/


อย่างที่คุณเห็นฉันมีบางสิ่งที่ยุ่งยากเกิดขึ้น ... แต่ตัวกระตุ้นหลักในการทำให้สิ่งนี้ดูดีคือ:

องค์ประกอบของผู้ปกครอง (UL): ขอบยุบ: แยก; ระยะห่างชายแดน: .25em; ขอบซ้าย: -.25em;
องค์ประกอบของเด็ก (LI): display: table-cell; แนวตั้ง: กลาง;

HTML

<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>

CSS

ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }

1

จากการแก้ปัญหาของ Cian ในการกำหนดเส้นขอบแทนระยะขอบฉันพบว่าคุณสามารถตั้งค่าสีของเส้นขอบเป็นแบบโปร่งใสเพื่อหลีกเลี่ยงไม่ให้สีตรงกับพื้นหลัง ทำงานใน FF17, IE9, Chrome v23 ดูเหมือนจะเป็นทางออกที่ดีหากคุณไม่จำเป็นต้องมีเส้นขอบจริง


1

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

การใช้ช่องว่างภายในไม่ใช่วิธีที่ถูกต้องอาจทำให้รูปลักษณ์เปลี่ยนไป แต่ไม่ใช่สิ่งที่คุณต้องการ วิธีนี้อาจช่วยแก้ปัญหาของคุณได้


มีการโพสต์โซลูชันนี้แล้วไม่จำเป็นต้องมีคำตอบ 2 คำตอบที่พูดในสิ่งเดียวกัน
Ason

1

คุณสามารถใช้ทั้งสองอย่าง:

padding-right:10px;

padding-right:10%;

แต่มันจะดีกว่าที่จะใช้กับ%


1
ฉันโหวตแล้ว แต่คุณอาจอธิบายได้ว่าทำไมถึงดีกว่าที่จะใช้%
Mawg บอกว่าคืนสถานะให้โมนิกา

1
โดยปกติ% จะใช้เพื่อตอบสนอง
Muhammad Awais

1
บวกหนึ่ง - บางทีคุณอาจแก้ไขคำตอบเพื่อพูดอย่างนั้น? ไม่มีใครอ่านอาจจะอ่านความคิดเห็น .. หากคุณต้องการเพิ่มลิงก์ไปยังบางสิ่งเกี่ยวกับการออกแบบที่ตอบสนองได้ดียิ่งขึ้น :-)
Mawg กล่าวคืนสถานะ Monica ใน

1

<colgroup>หากช่องว่างไม่ทำงานสำหรับคุณทำงานอีกรอบคือการเพิ่มคอลัมน์พิเศษและการตั้งค่าผ่านทางขอบกว้างโดยใช้ ไม่มีโซลูชันช่องว่างด้านบนที่ใช้งานได้สำหรับฉันเนื่องจากฉันพยายามให้ขอบเซลล์มีระยะขอบและนี่คือสิ่งที่แก้ไขปัญหาได้ในที่สุด:

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

จัดรูปแบบเส้นขอบของเซลล์ตารางโดยใช้: nth-child เพื่อให้คอลัมน์ที่ 2 และสามเป็นคอลัมน์เดียว

table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }

นั่นคือการกำบังปัญหาไม่ตอบโจทย์นั่นเอง ไม่มีใครจะเรียนรู้วิธีทำอย่างถูกต้องโดยการทำเช่นนั้น
Mawg กล่าวคืนสถานะ Monica
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.