Jak zwiększyć odległość między kolumnami tabeli w html?

Question

Powiedzmy, że chciałem stworzyć jednorzędowy stół z 50px pomiędzy każdą kolumną a 10px na górze i na dole.

Jak to zrobić w HTML/CSS?

Answer 1

Nie potrzeba fałszywej <td>. Zamiast tego użyj wartości border-spacing.Stosuje się go tak:

HTML:

<table> 
    <tr> 
    <td>First Column</td> 
    <td>Second Column</td> 
    <td>Third Column</td> 
    </tr> 
</table> 

CSS:

table { 
    border-collapse: separate; 
    border-spacing: 50px 0; 
} 

td { 
    padding: 10px 0; 
} 

Zobacz in action

Answer 2

Ustaw szerokość <td> s do 50px a następnie dodać <td> + kolejny fałszywy <td>

Fiddle.

HTML:

<table> 
    <tr> 
     <td>First Column</td> 
     <td></td> 
     <td>Second Column</td> 
     <td></td> 
     <td>Third Column</td> 
    </tr> 
</table> 

CSS

table tr td:empty { 
    width: 50px; 
} 

table tr td { 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

Kod Poradnik:

Pierwsze kontrole reguły CSS dla pusty td-tych i dać im szerokość 50px następnie druga reguła daje wyściółkę z góry i dołu do wszystkich td jest.

Answer 3

Spróbuj

padding : 10px 10px 10px 10px; 

Answer 4

można po prostu użyć wyściółkę. tak jak.

http://jsfiddle.net/davidja/KG8Kv/

HTML

<table> 
     <tr> 
      <td>item1</td> 
      <td>item2</td> 
      <td>item2</td> 
     </tr> 
    </table> 

CSS

td {padding:10px 25px 10px 25px;} 

LUB

tr td:first-child {padding-left:0px;} 
td {padding:10px 0px 10px 50px;} 

Answer 5

Jeśli dobrze rozumiem, chcesz to fiddle.

HTML:

<table> 
<tr> 
    <td>Hello HTML!</td> 
    <td>Hello CSS!</td> 
    <td>Hello JS!</td> 
</tr> 

CSS:

table { 
    background: gray; 
} 
td {  
    display: block; 
    float: left; 
    padding: 10px 0; 
    margin-right:50px; 
    background: white; 
} 
td:last-child { 
    margin-right: 0; 
} 

Answer 6

Jeśli trzeba podać odległość między dwoma rzędami użyj tego tagu

margin-top: 10px !important; 

Answer 7

Lepszym rozwiązaniem niż wybrana odpowiedź byłoby użycie rozmiaru krawędzi zamiast odstępu między krawędziami. Głównym problemem przy stosowaniu odstępów międzyramkowych jest to, że nawet pierwsza kolumna będzie miała odstępy z przodu.

Przykładowo

table { 
 
    border-collapse: separate; 
 
    border-spacing: 80px 0; 
 
} 
 

 
td { 
 
    padding: 10px 0; 
 
}

<table> 
 
    <tr> 
 
    <td>First Column</td> 
 
    <td>Second Column</td> 
 
    <td>Third Column</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
</table>

Aby uniknąć użycia: border-left: 100px solid #FFF; i ustawić border:0px w pierwszej kolumnie.

Na przykład

td,th{ 
 
    border-left: 100px solid #FFF; 
 
} 
 

 
tr>td:first-child { 
 
    border:0px; 
 
}

<table id="t"> 
 
    <tr> 
 
    <td>Column1</td> 
 
    <td>Column2</td> 
 
    <td>Column3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1000</td> 
 
    <td>2000</td> 
 
    <td>3000</td> 
 
    </tr> 
 
</table>