W tabeli HTML, cellpadding
i cellspacing
mogą być ustawione tak:
<table cellspacing="1" cellpadding="1">
Jak można to zrobić za pomocą CSS?
html
css
html-table
alignment
kokos
źródło
źródło
width:auto
wtedyborder-collapse
może nie działać zgodnie z oczekiwaniami.Odpowiedzi:
Podstawy
Do kontrolowania „paddingu” w CSS, możesz po prostu użyć
padding
na komórkach tabeli. Np. Dla 10px „cellpadding”:W przypadku „odstępu między komórkami” możesz zastosować
border-spacing
właściwość CSS do swojej tabeli. Np. Dla 10 pikseli „odstępu między komórkami”:Ta właściwość pozwoli nawet na oddzielne poziome i pionowe odstępy, czego nie można zrobić w oldschoolowym „odstępie komórek”.
Problemy w IE <= 7
Będzie to działać w prawie wszystkich popularnych przeglądarkach, z wyjątkiem przeglądarki Internet Explorer w wersji Internet Explorer 7, w której prawie nie masz szczęścia. Mówię „prawie”, ponieważ przeglądarki te nadal obsługują
border-collapse
właściwość, która łączy granice sąsiadujących komórek tabeli. Jeśli próbujesz wyeliminować odstępy między komórkami (to znaczycellspacing="0"
),border-collapse:collapse
powinien mieć ten sam efekt: brak spacji między komórkami tabeli. Ta obsługa jest jednak błędna, ponieważ nie zastępuje istniejącegocellspacing
atrybutu HTML elementu tabeli.W skrócie: w przypadku przeglądarek innych niż Internet Explorer 5-7
border-spacing
obsługuje cię. W przypadku programu Internet Explorer, jeśli Twoja sytuacja jest w porządku (chcesz mieć 0 komórek, a twoja tabela nie ma jeszcze zdefiniowanej definicji), możesz użyćborder-collapse:collapse
.Uwaga: świetny przegląd właściwości CSS, które można zastosować do tabel i dla których przeglądarek, znajduje się na tej fantastycznej stronie Quirksmode .
źródło
Domyślna
Domyślne zachowanie przeglądarki jest równoważne z:
Podkładka na telefon
Ustawia przestrzeń między zawartością komórki a ścianą komórki
Odstępy między komórkami
Kontroluje przestrzeń między komórkami tabeli
Obie
Oba (specjalne)
Spróbuj sam!
Tutaj możesz znaleźć stary sposób HTML na osiągnięcie tego celu.
źródło
źródło
cellspacing=0
równoważne. Odpowiednik dlacellspacing=1
jest zupełnie inny. Zobacz zaakceptowaną odpowiedź.table td
i powinientable th
byćtd
ith
odpowiednio? Działa to w obie strony, ale mniejszy selektor oznacza nieco szybsze dopasowanietable > tr > td
itable > tr > th
. Jest to prawie tak szybkie, jaktr
ith
, i gwarantuje, że zadziała, jeśli masz zagnieżdżony stół. Just my 2ctable
selektor jest potrzebny? IIRC, a<td>
jest nieważne, chyba że wewnątrz<tr>
.Ustawienie marginesów w komórkach tabeli, o ile wiem, nie ma żadnego efektu. Prawdziwy odpowiednik CSS dla
cellspacing
toborder-spacing
- ale nie działa w Internet Explorerze.Możesz użyć,
border-collapse: collapse
aby niezawodnie ustawić odstępy między komórkami na 0, jak wspomniano, ale dla każdej innej wartości uważam, że jedynym sposobem na przeglądarkę jest używanie tegocellspacing
atrybutu.źródło
border-collapse
działa tylko w IE 5-7, jeśli tabela nie ma jeszczecellspacing
zdefiniowanego atrybutu. Napisałem wyczerpującą odpowiedź, która łączy wszystkie poprawne części innych odpowiedzi na tej stronie w przypadku, gdy jest to pomocne.Ten hack działa w przeglądarce Internet Explorer 6 i nowszych, Google Chrome , Firefox i Opera :
*
Deklaracja jest dla programu Internet Explorer 6 i 7, a inne przeglądarki będą prawidłowo go zignorować.expression('separate', cellSpacing = '10px')
zwraca'separate'
, ale obie instrukcje są uruchamiane, ponieważ w JavaScript można przekazać więcej argumentów niż oczekiwano i wszystkie zostaną ocenione.źródło
Dla tych, którzy chcą niezerowej wartości odstępu między komórkami, następujący CSS działał dla mnie, ale mogę go przetestować tylko w Firefoksie.
Zobacz link Quirksmode opublikowany w innym miejscu, aby uzyskać szczegółowe informacje na temat zgodności. Wygląda na to, że może nie działać ze starszymi wersjami Internet Explorera.
źródło
Prostym rozwiązaniem tego problemu jest:
źródło
Również, jeśli chcesz
cellspacing="0"
, nie zapomnij dodaćborder-collapse: collapse
w swojejtable
„s stylów.źródło
Zawiń zawartość komórki div i możesz zrobić wszystko, co chcesz, ale musisz owinąć każdą komórkę w kolumnie, aby uzyskać jednolity efekt. Na przykład, aby uzyskać szerszy lewy i prawy margines:
CSS będzie więc
Tak, to kłopot. Tak, działa z Internet Explorerem. W rzeczywistości przetestowałem to tylko w przeglądarce Internet Explorer, ponieważ to wszystko, czego możemy używać w pracy.
źródło
Po prostu użyj
border-collapse: collapse
do stołu ipadding
doth
lubtd
.źródło
Ten styl służy do pełnego resetowania tabel - podkładanie komórek , odstępy między komórkami i obramowania .
Miałem ten styl w pliku reset.css:
źródło
TBH. Do wszystkich fanatyków z CSS możesz równie dobrze skorzystać,
cellpadding="0"
cellspacing="0"
ponieważ nie są przestarzałe ...Nikt inny sugerujący marże na
<td>
oczywiście nie próbował tego.źródło
źródło
Wystarczy użyć reguł wypełniania CSS z danymi tabeli:
I dla odstępów między krawędziami:
Może jednak powodować problemy w starszych wersjach przeglądarek, takich jak Internet Explorer, ze względu na różną implementację modelu pudełkowego.
źródło
Z klasyfikacji W3C rozumiem, że
<table>
są one przeznaczone do wyświetlania danych „tylko”.Na tej podstawie znacznie łatwiej było utworzyć
<div>
tło z innymi elementami i mieć tabelę z danymi unoszącymi się nad nim za pomocąposition: absolute;
ibackground: transparent;
...Działa w Chrome, Internet Explorerze (6 i nowszych) i Mozilla Firefox (2 i nowszych).
Marginesów (lub oznaczało jakikolwiek) w celu utworzenia przekładki pomiędzy elementami pojemnika, takie jak
<table>
,<div>
a<form>
, a nie<tr>
,<td>
,<span>
i<input>
. Używanie go do czegokolwiek innego niż elementy kontenera sprawi, że będziesz zajęty dostosowywaniem swojej witryny do przyszłych aktualizacji przeglądarki.źródło
CSS:
źródło
Możesz łatwo ustawić wypełnienie w komórkach tabeli za pomocą właściwości wypełnienia CSS. Jest to prawidłowy sposób na uzyskanie tego samego efektu, co atrybut padania komórek w tabeli.
Podobnie można użyć właściwości CSS border-spacing, aby zastosować odstępy między sąsiadującymi granicami komórek tabeli, takimi jak atrybut odstępu komórek. Jednak w celu pracy z odstępami między krawędziami wartość właściwości zwinięcia obramowania musi być oddzielna, co jest wartością domyślną.
źródło
Spróbuj tego:
Lub spróbuj tego:
źródło
Użyłem
!important
po upadku granicy jaki działa dla mnie w IE7. Wydaje się, że zastępuje atrybut odstępu komórek.
źródło
!important
byłoby potrzebne tylko w celu zastąpienia innych ustawień CSS w złożonej sytuacji (a nawet wtedy najczęściej niewłaściwe podejście).!important
, która mogłaby zostać uwzględniona jako komentarz zamiast innej odpowiedzi.cell-padding
może być podany przezpadding
w CSS, podczas gdycell-spacing
może być ustawiony przez ustawienieborder-spacing
dla tabeli.Fiddle .
źródło
Jeśli
margin
nie działa, spróbuj ustawićdisplay
odtr
doblock
, a następnie margines będzie działać.źródło
W przypadku tabel odstępy między komórkami i podkładki są przestarzałe w HTML 5.
Teraz dla odstępów między komórkami musisz użyć odstępów między ramkami. A do wypełniania komórek musisz użyć zawijania granicy.
I upewnij się, że nie używasz tego w kodzie HTML5. Zawsze staraj się używać tych wartości w pliku CSS 3.
źródło
źródło
W tabeli HTML znaki
cellpadding
icellspacing
mogą być ustawione tak:Do wypełniania komórek :
Wystarczy zadzwonić na prostą
td/th
komórkępadding
.Przykład:
Pokaż fragment kodu
Dla odstępów między komórkami
Po prostu zadzwoń prosto
table
border-spacing
Przykład:
Pokaż fragment kodu
Więcej stylów tabel według źródła CSS link tutaj możesz uzyskać więcej stylów tabel według CSS .
źródło
Możesz po prostu zrobić coś takiego w swoim CSS, używając
border-spacing
ipadding
:źródło
Co powiesz na dodanie stylu bezpośrednio do samej tabeli? Jest to zamiast używania
table
w CSS, co jest złym podejściem, jeśli masz wiele tabel na swojej stronie:źródło
td { padding: ... }
lubtable { border-spacing: ... }
zamiast zastosować ją bezpośrednio do tabeli. Te nic nie dodają. Jak powiedziałem, kiedy masz wiele tabel na swojej stronie i nie chcesz na nie wpływać, nie chcesz tego! Nie potrzebujemy całej strony odpowiedzi z napisem „Użyj arkusza stylów!”, Gdy być może jest to ostatnia rzecz, jakiej chcesz, ponieważ chcesz formatować tylko jedną komórkę lub tabelę. To jest, gdy zastosowanie go jest niepożądanetable
lubtd
jest niepożądane, a tworzenie zupełnie nowej klasy jest nadmierne.table#someId
).Sugeruję to i wszystkie komórki dla konkretnej tabeli zostaną wykonane.
źródło
Możesz sprawdzić poniższy kod, po prostu stwórz
index.html
i uruchom go.WYNIK :
źródło