Sınırı yalnızca tablonun içine nasıl uygulayabilirim?

195

Nasıl sadece tablonun içine sınır eklemek için anlamaya çalışıyorum. Ben yaparken:

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

Sınır tüm tablonun etrafında ve ayrıca tablo hücreleri arasındadır. Ne elde etmek istiyorum sadece tablo hücreleri (tablonun etrafında dış kenarlık olmadan) etrafında tablo içinde sınır sahip olmaktır.

Tablolar için kullandığım biçimlendirme (önemli olmadığını düşünmeme rağmen):

<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>

Tablolarımın çoğuna uyguladığım bazı temel stiller:

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

— Richard Knop
kaynak

Sadece hücrelerin etrafındaki sınırları görüyorum. Hücrelerin her birinin bir kenarlığı olduğundan, tablonun bir kenarlığı olduğu anlaşılıyor. Belki de soruyu anlamadım?

— Chetan S

3

İç sınırlar da denir .

— Mekanik salyangoz

203

Yapmaya çalıştığına inandığım şeyi yapıyorsanız, bunun gibi bir şeye daha ihtiyacınız olacak:

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 Demosu

Sorun, tüm hücrelerin etrafına bir 'tam kenarlık' ayarlamanızdır;

Şerefe.

EDIT: Bu sözde sınıfları hakkında biraz daha fazla bilgi quirksmode bulunabilir ve beklendiği gibi, IE desteği açısından hemen hemen SOL vardır.

— IV'si
kaynak

Bunun gibi basit tablolarla, bir sonraki kardeş birleştiricisini kullanarak sözde sınıfları kullanmaktan kaçınan çok daha kısa bir çözüm var. Cevabımı gör.

— dalgard

1

@theIV, bunun 5+ yıl önce yanıtlanmasıyla, bunun 'yeni' / 'daha verimli' bir yolu var mı?

— jbutler483

Herhangi bir tablonun ilk sütununda rowspan kullanırsanız çalışmaz.

— Jack

192

bu benim için çalışıyor:

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

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

örneği görüntüle ...

FF 3.6 ve Chromium 5.0'da test edilmiş, IE desteği yoktur; dan W3C :

'Gizli' nin 'sınır tarzı' ile olan sınırlar, diğer tüm çelişkili sınırlardan önceliklidir. Bu değere sahip herhangi bir kenarlık, bu konumdaki tüm kenarlıkları bastırır.

— anthonyrisinger
kaynak

1

Bir masa kenarlığına ihtiyacınız olmadığı sürece, bu kesinlikle en zarif çözümdür.

— cjroth

42

İstediğiniz efekti elde etmenin çok basit bir yolu örneği :

<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
kaynak

13

"SİHİRLİ" AÇIKLANMASI: frame ve rulesolduğu ESKİ (değil HTML5) table niteliklerini (yerine CSS kullanmalısınız). dış tablo kenarlıklarının framehangi bölümlerinin görünür olması gerektiğini söylüyor - tüm dış kenarlıkları gizlemek anlamına geliyor ... tablo iç sınırlarının hangi bölümlerinin görünür olması gerektiğini söylüyor - hepsi anlamına geliyor ... açıkçası ... Lütfen bunu kullanmayın. voidrulesall

— HTML3

1

Kenarlık gibi bir şey eklemek: 1px düz siyah, tablonun dış sınırının bir kenarlık almasını sağlar.

— Aaron Liu

1

Hızlı bir şekilde okuduğum bir web sitesinde gülünç aralıklı bir tabloya bazı okunabilirlik eklemek için 2020 yılında bir cazibe gibi çalıştı. Aslında, bu sadece iç sınırlar için yeterliydi: rules = "all"

— Edoardo Facchinelli

11

Yani ie7, ie8 ile uyumluluk nedeniyle bunu yapmak için ilk-çocuk ve son-çocuk değil kullanmanızı öneririz:

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 Sözde dersleri hakkında bilgi için: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

— Crisboot
kaynak

Bu harika bir çözüm. Ancak dikkatli olun, tablo hücrelerinizden birinde başka bir tablonuz varsa ve iç kenarlıkları görmek istiyorsanız, "iç" tablonuz için başka bir CSS satırı kümesine ihtiyacınız vardır

— Michael Biermann

10

Sıradan tablo işaretlemesi için, IE 7 ve altı hariç, BrowserStack'taki tüm cihazlarda / tarayıcılarda çalışan kısa bir çözüm:

table { border-collapse: collapse; }

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

IE 7 desteği için şunu ekleyin:

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

Bir test durumu burada görülebilir: http://codepen.io/dalgard/pen/wmcdE

— dalgard
kaynak

Harika - bu aynı zamanda masaya farklı bir sınır belirlemenize izin verir, sadece göstermekten ziyade rater.

— jsbueno

5

bu çalışmalı:

table {
 border:0;
}

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

Düzenle:

Sadece denedim, tablo sınırı yok. ama bir tablo kenarlığı ayarlarsam, bu kenar-çöküşü ile ortadan kaldırılır.

bu test dosyası:

<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
kaynak

Hayır, işe yaramadı bunu denedim. İlk yazımı düzenleyeceğim.

— Richard Knop

3

her şeyi css olmadan yapacak <TABLE BORDER=1 RULES=ALL FRAME=VOID>

kodu: HTML KODU EĞİTİMİ

— TwoFaceZ
kaynak

0

Bununla her hücreye kenarlığı ekleyin:

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

Üst kenarlığı ilk satırdaki tüm hücrelerden kaldırın:

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

İlk sütundaki hücrelerden sol kenarlığı kaldırın:

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

Son sütundaki hücrelerden sağ kenarlığı kaldırın:

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

Alt kenarlığı son satırdaki hücrelerden kaldırın:

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

http://jsfiddle.net/hzru0ytx/

— Brian
kaynak

0

Tbody / thead / tfoot ve td / th'nin herhangi bir kombinasyonu için çalışır

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>

Snippet'i genişlet

— user1119279
kaynak