Margines komórki CSS

Question 1

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.

Question 2

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>

Question 3

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!

Question 4

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

Question 5

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.

Question 6

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

Question 7

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

Question 8

Spróbuj padding-right. Nie wolno ci umieszczać marginmiędzy komórkami.

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

Question 9

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>

Question 10

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>

Rozwiń fragment

Question 11

W ten sposób nie można wyróżnić poszczególnych kolumn w komórce. Moim zdaniem najlepszą opcją jest dodanie litery a style='padding-left:10px'w drugiej kolumnie i zastosowanie stylów do wewnętrznego elementu div lub elementu. W ten sposób można uzyskać iluzję większej przestrzeni.

Question 12

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.

Question 13

ROZWIĄZANIE

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

http://jsfiddle.net/MG4hD/

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

Question 14

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.

Question 15

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

Rozwiń fragment

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.

Question 16

Możesz użyć obu z nich:

padding-right:10px;

padding-right:10%;

Ale lepiej jest używać z % .

Question 17

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

Answer 1

96

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.

html css cell margin css-tables Tomek
źródło

Jest tutaj dobre rozwiązanie CSS, niedawno zaktualizowane: stackoverflow.com/a/21551008/2827823

Ason

Answer 2

Jest tutaj dobre rozwiązanie CSS, niedawno zaktualizowane: stackoverflow.com/a/21551008/2827823

Ason

Answer 3

91

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>

roman m
źródło

12

O wiele lepszym podejściem byłoby użycie zawalenia granic: osobne

Gaurav Ramanan

21

Na wypadek, gdyby ktoś kopiował / wklejał technikę border-collapse: separateseparate

zawijania

1

Ponadto, jeśli chcesz określić wielkość odstępu między granicami, będziesz musiał użyćborder-spacing: 5px;

Sølve Tornøe

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.

Lee Blake

border-spacingprzyjmuje dwa argumenty - jeden dla poziomu i jeden dla pionu.

OldTinfoil

Answer 4

12

O wiele lepszym podejściem byłoby użycie zawalenia granic: osobne

Gaurav Ramanan

Answer 5

21

Na wypadek, gdyby ktoś kopiował / wklejał technikę border-collapse: separateseparate

zawijania

Answer 6

1

Ponadto, jeśli chcesz określić wielkość odstępu między granicami, będziesz musiał użyćborder-spacing: 5px;

Sølve Tornøe

Answer 7

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.

Lee Blake

Answer 8

border-spacingprzyjmuje dwa argumenty - jeden dla poziomu i jeden dla pionu.

OldTinfoil

Answer 9

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!

Answer 10

To jest świetne i wszystko do wypełnienia, ale co z marginesem? Chcę dodać przestrzeń poza komórką zawierającą obramowanie. Wydaje się, że marginesy CSS nie mają wpływu na komórki.

Levitikon

Answer 11

1

Levitikon, to prawda - marginesy nie działają z powyższych powodów. Jedynym sposobem, aby uzyskać to, czego chcesz, AFAIK, jest zawinięcie zawartości komórki w DIV, dodanie marginesu i obramowania do tego DIV, a nie komórki.

ravi

Answer 12

Dawno temu opublikowałem rozwiązanie CSS (zaktualizowałem je dzisiaj): stackoverflow.com/a/21551008/2827823

Ason

Answer 13

28

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

nika206
źródło

3

Możesz sprawdzić więcej o zawalaniu się granic: oddziel tutaj css-tricks.com/almanac/properties/b/border-collapse

Gaurav Ramanan

Answer 14

3

Możesz sprawdzić więcej o zawalaniu się granic: oddziel tutaj css-tricks.com/almanac/properties/b/border-collapse

Gaurav Ramanan

Answer 15

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.

Answer 16

14

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

Cian
źródło

Wygląda na to, że obramowanie ma ten sam problem co wypełnienie - dodaje przestrzeń między zawartością komórki a granicą, a nie poza granicami.

stewbasic

Answer 17

Wygląda na to, że obramowanie ma ten sam problem co wypełnienie - dodaje przestrzeń między zawartością komórki a granicą, a nie poza granicami.

stewbasic

Answer 18

11

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

MrTrebor
źródło

to jest dobre, proste i skuteczne, dzięki za przypomnienie mi +1

Hayden Thring,

8

To nie jest dobre podejście do rozdzielania struktury i stylizacji. Nie chodzi o to, czy CSS jest wymagany, czy nie - CSS powinien być używany do czegoś takiego.

Simon Robb,

nie powinno być <td style = "width: 10px;"> </td>

Rune Jeppesen

1

Pamiętaj, najprostsze rozwiązania są najlepsze. Metoda ze stylem inline też jest dobra :)

MrTrebor

Działa w moim konkretnym przypadku. Bardzo kreatywne. Dziękuję

Phan Van Linh

Answer 19

to jest dobre, proste i skuteczne, dzięki za przypomnienie mi +1

Hayden Thring,

Answer 20

8

To nie jest dobre podejście do rozdzielania struktury i stylizacji. Nie chodzi o to, czy CSS jest wymagany, czy nie - CSS powinien być używany do czegoś takiego.

Simon Robb,

Answer 21

nie powinno być <td style = "width: 10px;"> </td>

Rune Jeppesen

Answer 22

1

Pamiętaj, najprostsze rozwiązania są najlepsze. Metoda ze stylem inline też jest dobra :)

MrTrebor

Answer 23

Działa w moim konkretnym przypadku. Bardzo kreatywne. Dziękuję

Phan Van Linh

Answer 24

Spróbuj padding-right. Nie wolno ci umieszczać marginmiędzy komórkami.

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

Answer 25

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>

Answer 26

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>

Rozwiń fragment

Answer 27

Działało to również dla tabel css (display: table *) utworzonych z elementów div.

Necreaux

Answer 28

W ten sposób nie można wyróżnić poszczególnych kolumn w komórce. Moim zdaniem najlepszą opcją jest dodanie litery a style='padding-left:10px'w drugiej kolumnie i zastosowanie stylów do wewnętrznego elementu div lub elementu. W ten sposób można uzyskać iluzję większej przestrzeni.

Answer 29

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.

Answer 30

ROZWIĄZANIE

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

http://jsfiddle.net/MG4hD/

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

Answer 31

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.

Answer 32

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

Rozwiń fragment

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.

Answer 33

To rozwiązanie jest już opublikowane, nie ma potrzeby udzielania 2 odpowiedzi mówiących to samo.

Ason

Answer 34

1

Możesz użyć obu z nich:

padding-right:10px;

padding-right:10%;

Ale lepiej jest używać z % .

Muhammad Awais
źródło

1

Głosowałem za, ale być może wyjaśniłeś, dlaczego lepiej jest używać%

Mawg mówi, że przywróć Monikę.

1

Zwykle% jest używany do tworzenia odpowiedzi.

Muhammad Awais

1

Plus jeden - może mógłbyś zmienić swoją odpowiedź, aby tak powiedzieć? Mało kto czyta, może przeczytać komentarze. Jeśli chcesz dodać link do czegoś o responsywnym designie, jeszcze lepiej :-)

mówi Mawg, przywróć Monikę.

Answer 35

1

Głosowałem za, ale być może wyjaśniłeś, dlaczego lepiej jest używać%

Mawg mówi, że przywróć Monikę.

Answer 36

1

Zwykle% jest używany do tworzenia odpowiedzi.

Muhammad Awais

Answer 37

1

Plus jeden - może mógłbyś zmienić swoją odpowiedź, aby tak powiedzieć? Mało kto czyta, może przeczytać komentarze. Jeśli chcesz dodać link do czegoś o responsywnym designie, jeszcze lepiej :-)

mówi Mawg, przywróć Monikę.

Answer 38

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

Answer 39

To maskowanie problemu, a nie odpowiadanie na niego. Nikt nie nauczy się, jak to zrobić właściwie, robiąc to

Mawg mówi,

Margines komórki CSS

Odpowiedzi:

ROZWIĄZANIE