თვისება empty-cells

თვისება empty-cells განსაზღვრავს ბრაუზერისთვის, როგორ აჩვენოს ცარიელი უჯრების td ან უჯრების th HTML ცხრილის ფონი და საზღვარი: გამოჩნდეს თუ არა.

უჯრა ცარიელად ითვლება შემდეგ შემთხვევებში: არ არის არცერთი სიმბოლო, უჯრაში შეიცავს მხოლოდ სივრცეს (ერთი ან მეტი), ხაზის გამოტოვებას ან ტაბულაციის სიმბოლოს, ან თუ თვისება visibility დაყენებულია როგორც hidden.

უჯრის არაცარიელად გამოსაჩენად, მაგრამ ამასთანავე ხილული ტექსტის გარეშე, გამოიყენება შემდეგი მეთოდი: უჯრაში იწერება განუყოფელი სივრცე  .

თვისება არ მუშაობს, თუ დაყენებულია border-collapse მნიშვნელობაზე collapse.

სინტაქსი

სელექტორი {
	empty-cells: show | hide;
}

მნიშვნელობები

მნიშვნელობა	აღწერა
`show`	ცარიელი უჯრის ფონი და საზღვარი გამოიყურება.
`hide`	ცარიელი უჯრის ფონი და საზღვარი არ გამოიყურება.

საწყისი მნიშვნელობა: show.

მაგალითი . მნიშვნელობა show

ამჟამად ცხრილში ზოგიერთი უჯრა ცარიელია, მაგრამ მაინც აქვთ საზღვარი და ფონი:

<table>
	<tr>
		<td>უჯრა</td>
		<td></td>
		<td>უჯრა</td>
	</tr>
	<tr>
		<td></td>
		<td>უჯრა</td>
		<td></td>
	</tr>
	<tr>
		<td>უჯრა</td>
		<td>უჯრა</td>
		<td>უჯრა</td>
	</tr>
</table>

table {
	width: 400px;
	empty-cells: show;
}
td {
	border: 1px solid black;
	background-color: #f3f3f3;
	text-align: center;
}

მაგალითი . მნიშვნელობა hide

ახლა კი ცარიელ უჯრებს არ ექნებათ ფონი და საზღვარი:

<table>
	<tr>
		<td>უჯრა</td>
		<td></td>
		<td>უჯრა</td>
	</tr>
	<tr>
		<td></td>
		<td>უჯრა</td>
		<td></td>
	</tr>
	<tr>
		<td>უჯრა</td>
		<td>უჯრა</td>
		<td>უჯრა</td>
	</tr>
</table>

table {
	width: 400px;
	empty-cells: hide;
}
td {
	border: 1px solid black;
	background-color: #f3f3f3;
	text-align: center;
}

იხილეთ აგრეთვე

ფსევდოკლასი empty,
რომელიც განსაზღვრავს, როგორ გამოიყურება ცარიელი ელემენტი