W moim dokumencie HTML mam tabelę z dwiema kolumnami i wieloma wierszami. Jak mogę zwiększyć odstęp między pierwszą a drugą kolumną za pomocą CSS? Próbowałem zastosować „margin-right: 10px;” do każdej komórki po lewej stronie, ale bez efektu.
W moim dokumencie HTML mam tabelę z dwiema kolumnami i wieloma wierszami. Jak mogę zwiększyć odstęp między pierwszą a drugą kolumną za pomocą CSS? Próbowałem zastosować „margin-right: 10px;” do każdej komórki po lewej stronie, ale bez efektu.
Odpowiedzi:
Zastosuj to do swojego pierwszego <td>:
padding-right:10px;Przykład HTML:
<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>border-collapse: separateseparate
border-spacing: 5px;
border-spacingdodaje również odstępy między rzędami. Niestety nie ma osobnej właściwości dla odstępów w pionie i poziomie.
border-spacingprzyjmuje dwa argumenty - jeden dla poziomu i jeden dla pionu.
Słowo ostrzeżenia: chociaż padding-rightmoże rozwiązać twój konkretny problem (wizualny), nie jest to właściwy sposób dodawania odstępów między komórkami tabeli. To, co padding-rightrobi dla komórki, jest podobne do tego, co robi z większością innych elementów: dodaje przestrzeń w komórce. Jeśli komórki nie mają obramowania, koloru tła lub czegoś innego, co utrudnia grę, może to naśladować efekt ustawienia odstępu między komórkami, ale nie inaczej.
Jak ktoś zauważył, specyfikacje marginesów są ignorowane dla komórek tabeli:
Specyfikacja CSS 2.1 - Tabele - Wizualny układ zawartości tabeli
Wewnętrzne elementy tabeli generują prostokątne ramki z zawartością i obramowaniem. Komórki również mają wypełnienie. Wewnętrzne elementy tabeli nie mają marginesów.
Jaki jest zatem „właściwy” sposób? Jeśli chcesz zastąpić cellspacingatrybut tabeli, to border-spacing(z border-collapsewyłączonym) jest zamiennikiem. Jeśli jednak wymagane są „marginesy” na komórkę, nie jestem pewien, jak można to poprawnie osiągnąć za pomocą CSS. Jedynym hackem, o którym przychodzi mi do głowy, jest użycie paddingjak powyżej, unikanie stylizacji komórek (kolory tła, obramowania itp.) I zamiast tego używanie kontenerów DIV wewnątrz komórek, aby zaimplementować taką stylizację.
Nie jestem ekspertem od CSS, więc mógłbym się mylić w powyższym (co byłoby świetnie wiedzieć! Też chciałbym mieć rozwiązanie CSS dla marginesów komórek tabeli).
Twoje zdrowie!
Jeśli nie możesz użyć dopełnienia (na przykład masz obramowania w td), spróbuj tego
table {
border-collapse: separate;
border-spacing: 2px;
}Zdaję sobie sprawę, że jest to dość spóźnione, ale dla przypomnienia, możesz również użyć do tego selektorów CSS (eliminując potrzebę stosowania stylów wbudowanych). Ten CSS stosuje dopełnienie do pierwszej kolumny każdego wiersza:
table > tr > td:first-child { padding-right:10px }A to byłby twój HTML, bez CSS !:
<table><tr><td>data</td><td>more data</td></tr></table>Pozwala to na znacznie bardziej eleganckie znaczniki, szczególnie w przypadkach, w których musisz wykonać wiele specyficznego formatowania za pomocą CSS.
margines nie działa niestety na pojedynczych komórkach, jednak możesz dodać dodatkowe kolumny między dwiema komórkami, między którymi chcesz umieścić spację ... inną opcją jest użycie obramowania w tym samym kolorze co tło ...
Możesz to po prostu zrobić:
<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>Żaden CSS nie jest wymagany :) To 10px to Twoja przestrzeń.
Korzystanie z border-collapse: oddzielne;nie działa dla mnie, ponieważ potrzebuję tylko marginesu między komórkami tabeli, a nie po bokach tabeli.
Wymyśliłem następne rozwiązanie:
- 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>To rozwiązanie sprawdza się zarówno dla osób td, które potrzebują borderi paddingdo stylizacji.
(Testowane w 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>Zaktualizowano 2016
Firefox obsługuje teraz to bez inline-blocki zestawuwidth
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>Jeśli masz kontrolę nad szerokością tabeli, wstaw dopełnienie z lewej strony we wszystkich komórkach tabeli i wstaw ujemny lewy margines na całej tabeli.
table {
margin-left: -20px;
width: 720px;
}
table td {
padding-left: 20px;
}Uwaga: szerokość tabeli musi uwzględniać szerokość dopełnienia / marginesu. Na przykładzie powyższego wizualna szerokość tabeli wyniesie 700 pikseli.
To nie jest najlepsze rozwiązanie, jeśli używasz obramowań w komórkach tabeli.
Uważam, że najlepszym sposobem rozwiązania tego problemu jest połączenie prób i błędów oraz przeczytanie tego, co zostało napisane przede mną:
Jak widać, dzieje się kilka dość trudnych rzeczy ... ale głównym powodem, dla którego można to dobrze wyglądać, są:
ELEMENT RODZICIELSKI (UL): border-collapse: oddzielne; border-spacing: .25em; margin-left: -,25em;
CHILD ELEMENTS (LI): wyświetlacz: tabela-komórka; Vertical-align: do środka;
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; }Idąc za rozwiązaniem Ciana polegającym na ustawianiu obramowania zamiast marginesu, odkryłem, że można ustawić kolor obramowania na przezroczysty, aby uniknąć konieczności dopasowania koloru do tła. Działa w FF17, IE9, Chrome v23. Wydaje się, że to przyzwoite rozwiązanie, pod warunkiem, że nie potrzebujesz również rzeczywistej granicy.
<!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>Używanie dopełnienia nie jest prawidłowym sposobem robienia tego, może zmienić wygląd, ale nie jest to, czego chciałeś. To może rozwiązać twój problem.
Możesz użyć obu z nich:
padding-right:10px;
padding-right:10%;Ale lepiej jest używać z % .
%
Jeśli wypełnienie nie działa dla Ciebie, innym sposobem obejścia problemu jest dodanie dodatkowych kolumn i ustawienie marginesu przez szerokość za pomocą <colgroup>. Żadne z powyższych rozwiązań wypełnienia nie działało dla mnie, ponieważ próbowałem nadać samej granicy komórki margines, a to ostatecznie rozwiązało problem:
<table>
<colgroup>
<col>
<col width="20px">
<col>
</colgroup>
<tr>
<td>data</td>
<td></td>
<td>more data</td>
</tr>
</table>Stylizuj obramowanie komórek tabeli, używając: nth-child, tak aby druga i trzecia kolumna wyglądały na jedną kolumnę.
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; }