Soru CSS'de hücre yüzeyi ve hücre boşluğu ayarla?


Bir HTML tablosunda cellpadding ve cellspacing şu şekilde ayarlanabilir:

<table cellspacing="1" cellpadding="1">

Aynısı CSS kullanılarak nasıl başarılabilir?


2924
2017-12-04 08:45


Menşei


Sadece genel bir öneri olarak, bu çözümleri denemeden önce, style.css'in tablolarınızda "sıfırlama" yapıp yapmadığını kontrol edin. Örnek: Tablo ayarlarınız yoksa width:auto sonra border-collapse beklendiği gibi çalışmayabilir. - PJ Brunet
Tablodaki sınır boşluklarını ve td. - Anubhav


Cevaplar:


temeller

CSS'de "cellpadding" i kontrol etmek için basitçe kullanabilirsiniz padding masa hücreleri üzerinde. Örneğin. 10px "cellpadding" için:

td { 
    padding: 10px;
}

"Cellspacing" için uygulayabilirsiniz border-spacing CSS özelliği tablonuza. Örneğin. 10px "cellspacing" için:

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

Bu özellik, eski okul "hücre boşaltma" ile yapamayacağınız ayrı yatay ve dikey aralıklara bile izin verecektir.

IE'deki sorunlar <= 7

Bu, Internet Explorer 7'den neredeyse tüm popüler tarayıcılarda, neredeyse şans dışı olduğunuz Internet Explorer 7'de çalışır. "Hemen hemen" diyorum çünkü bu tarayıcılar hala border-collapse Bitişik tablo hücrelerinin sınırlarını birleştiren özellik. Hücre boşluğu ortadan kaldırmaya çalışıyorsanız (yani, cellspacing="0") sonra border-collapse:collapse aynı etkiye sahip olmalıdır: masa hücreleri arasında boşluk yok. Bu destek, bir var olanı geçersiz kılmamakla birlikte, buggy'dir. cellspacing Tablo öğesinde HTML niteliği.

Kısaca: Internet Explorer dışındaki 5-7 tarayıcıları için border-spacing seni idare eder. Internet Explorer için durumunuz doğruysa (0 cellspacing istiyorsanız ve tablonuz zaten tanımlanmamışsa) kullanabilirsiniz. border-collapse:collapse.

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

Not: Tablolara ve tarayıcılara uygulanabilecek CSS özelliklerine genel bir bakış için bkz. fantastik Quirksmode sayfası.


3227
2017-07-09 02:34



cellpadding = "0", Chrome 13.0.782.215'te, yine de border-collapse: daraltma ve kenarlık aralığı tabloya uygulanmış olsa bile fark yaratabilir. - Lee
@LeeWhitney doldurma ayarlamanız gerekir: Tablo hücrelerinizde 0. - Martin Ørding-Thomsen
Konudan biraz uzaklaşılıyor, ancak hücre üstü doldurma ve hücre alanı özellikleri HTML5'te kaldırıldı, bu yüzden şimdi gitmek için tek yol CSS. - Ignas2526
Herkese selam. Ben açık olduğunu düşündüğüm hücre padding bir bölüm de dahil olmak üzere netlik için cevabı güncelledik (sadece "dolgu" kullanın). Umarım şimdi daha yararlıdır. - Eric Nguyen
True, @vapcguy, bir tabloyu şekillendirebileceğiniz sonsuz değişkenlerin herhangi birinde, daha spesifik seçicileri tanımlamanız gerekecektir. Yukarıdaki örnekler örnek olarak işaretlenmiştir. - Eric Nguyen


Varsayılan

Tarayıcının varsayılan davranışı aşağıdakilere eşdeğerdir:

table {border-collapse: collapse;}
td    {padding: 0px;}

enter image description here

cellpadding

Hücrenin içeriği ve hücre duvarı arasındaki boşluk miktarını ayarlar

table {border-collapse: collapse;}
td    {padding: 6px;}

enter image description here

cellspacing

Tablo hücreleri arasındaki alanı kontrol eder

table {border-spacing: 2px;}
td    {padding: 0px;}

enter image description here

Her ikisi de

table {border-spacing: 2px;}
td    {padding: 6px;}

enter image description here

İkisi de (özel)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

enter image description here

Not: Varsa border-spacing ayarla, gösterir border-collapse masanın mülkü separate.

Kendin dene!

İşte Bunu başarmanın eski html yolunu bulabilirsiniz.


851
2018-06-12 10:24



Tablonun etrafındaki boşluk nasıl kaybolur? "Sınır aralığı: 8px 12px'i ayarladığım zaman, sadece aradaki değil, tablo kenarlığı ve dış hücreler arasındaki boşlukları ekler! Ama bu resimlerde tasvir edilmez; - Kaz
@ 2astalavista Ve ne yazık ki birisi dış boşlukların etkisini silmek istiyorsa, bu CSS özellikleriyle bu şekilde çalışmayacaktır. - Kaz
@Kaz Bu sinir bozucu parçayı gizlemek için negatif marj kullanmanız gerekebilir.
TD'deki varsayılan dolgu genellikle 0 değil, 0'dır. - Jan M


table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

313
2017-08-24 15:17



Bu aslında benim için çalışabileceğim tek şey, aşırı genel olmaktan kaçınmak için bilgiyi bir id olarak uygulasa da. - Kzqai
budur cellspacing=0 eşdeğer. Eşdeğer cellspacing=1 tamamen farklı. Kabul edilen cevaba bakınız. - TRiG
olmamalı table td ve table th sadece ol td ve th sırasıyla? Her iki şekilde çalışır, ancak daha küçük bir seçici biraz daha hızlı eşleşme demektir - Cole Johnson
@Cole Aslında, olması gerektiğini düşünüyorum table > tr > td ve table > tr > th. Bu neredeyse kadar hızlı tr ve thve iç içe geçmiş bir tablonuz varsa çalışmanız garanti edilir. Sadece benim 2c - aboveyou00
@ aboveyou00 ama table seçici gerekli? IIRC, bir <td> içinde değilse geçersiz <tr>. - Cole Johnson


Tablo hücrelerindeki kenar boşluklarını ayarlamak, bildiğim kadarıyla bir etki yaratmıyor. İçin gerçek CSS eşdeğeri cellspacing olduğu border-spacing - ama Internet Explorer'da çalışmıyor.

Kullanabilirsiniz border-collapse: collapse Belirtildiği gibi 0'a hücre aralığını güvenilir bir şekilde ayarlamak için, ancak başka bir değer için tek çapraz tarayıcı yolu kullanarak cellspacing bağlıyor.


104
2017-12-04 09:18



Bugünün çağında gerçekliğin Nth derecesine kadar emildiği görülür. - John K
Bu neredeyse doğru ama border-collapse Tablonun zaten bir örneği yoksa sadece IE 5-7'de çalışır cellspacing özellik tanımlandı. Yararlı olması durumunda, bu sayfadaki diğer cevapların tüm doğru kısımlarını birleştiren kapsamlı bir cevap yazdım. - Eric Nguyen
Dürüst olmak gerekirse, Internet Explorer kimin umurunda? Bunu kullanan herkes, bozuk web sitelerini bilmelidir onların arıza - böyle düşük kaliteli bir tarayıcı kullanmak için. Web siteleri bununla uğraşmak zorunda kalmamalıdır. Internet Explorer'ın kaybolmasına izin verin. Bunun için desteği unutun. İhtiyacımız yok ve geliştirmek için bir acı. - Dev


Bu hack, Internet Explorer 6 ve sonrası için çalışıyor, Google Chrome, Firefox ve Opera:

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

* bildirimi Internet Explorer 6 ve 7 içindir ve diğer tarayıcılar uygun şekilde yoksayacaktır.

expression('separate', cellSpacing = '10px') döner 'separate'ancak her iki deyim de çalıştırılır, JavaScript’te olduğu gibi beklenenden daha fazla argüman iletebilir ve hepsi değerlendirilecektir.


84
2017-12-05 04:30



Duyarlı e-postaları almaya çalışanlar için, notun 2007+ outlook tarafından tanınmadığını not edin campaignmonitor.com/css - ptim


Sıfır olmayan bir hücre boşluğu değeri isteyenler için, şu CSS benim için çalıştı, ancak sadece Firefox'ta test edebiliyorum. Bakın Alay modu bağlantı başka bir yere gönderildi uyumluluk detayları için. Eski Internet Explorer sürümleriyle çalışmayabilir gibi görünüyor.

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

61
2017-08-20 03:32





Bu soruna basit bir çözüm:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

44
2017-12-08 16:04