Egenskapen border-spacing

Egenskapen border-spacing sätter avståndet mellan celler av typen td eller celler av typen th i en HTML tabell (och mellan cellens kant och själva tabellen). Värdet på egenskapen kan anges i alla enheter för storlekar, förutom procent.

Syntax

selektor {
	border-spacing: ett eller två värden;
}

Värden

Värde	Beskrivning
ett värde	Ett värde sätter samma avstånd mellan cellerna lodrätt och vågrätt.
två värden	Det första värdet sätter avståndet vågrätt, och det andra värdet sätter avståndet lodrätt.

Standardvärde: 0. Men, varje webbläsare har ett eget, icke-nollvärde för attributet cellspacing, så som standard kommer du att se avstånd mellan cellerna.

Anmärkningar

Applicera egenskapen på tabeller, inte på dess celler (det kommer inte att fungera på celler).

Man kan inte uppnå samma effekt med margin, eftersom margin inte fungerar för tabellceller.

Om egenskapen border-collapse är satt till värdet collapse - kommer border-spacing inte att fungera.

Exempel . Ett värde

Låt oss sätta avståndet mellan cellerna (och mellan cellen och tabellens kant) till 10px:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-spacing: 10px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

Exempel . Två värden

Och nu sätter vi avståndet till 10px vågrätt och 30px lodrätt:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-spacing: 10px 30px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

Exempel . Sätter border-collapse: collapse

Men nu kommer border-spacing inte att fungera på grund av egenskapen border-collapse satt till värdet collapse:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: collapse;
	border-spacing: 10px 30px;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}