Я хотел бы сделать все ячейки таблицы HTML активируемыми, то есть ссылка из тега привязки активна из любой точки ячейки. Загвоздка в том, что в клетках нет содержимого. Мы просто используем таблицу HTML для визуального представления величин путем окрашивания фона каждой ячейки. Ячейки, содержащие теги привязки, но без содержимого между тегами привязки.
Ниже приведены три примера таблиц. В первой таблице измерения для ячеек не определены. Во второй таблице определены минимальные размеры. В третьей таблице ширина и высота определены явно. В первой ячейке первой строки каждой таблицы находится простой символ точки. Обратите внимание, что в первой и второй таблицах кликабельна только эта ячейка. Мы хотели бы избежать явной установки высоты и ширины, и поэтому, если бы мы могли изменить одну из первых двух таблиц, чтобы она соответствовала кликабельному поведению третьей, это было бы фантастически. Мы можем поместить неразрывный пробел ( ) в теги привязки, но есть ли другое, более элегантное решение?
<html>
<head>
<style>
td.min {min-width: 1px; min-height: 1px;}
td.defined {width: 50px; height: 50px;}
td a.fullcell {width: 100%; height: 100%; display: block;}
</style>
</head>
<body>
<h1>No dimension defined</h1>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td bgcolor="#ffbbbb"><a class="fullcell" href="#">.</a></td>
<td bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
</tr>
<tr>
<td>B</td>
<td bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
<td bgcolor="#ffbbff"><a class="fullcell" href="#"></a></td>
</tr>
</table>
<h1>Min-dimension defined</h1>
<table border="1">
<tr>
<td class="min">1</td>
<td class="min">2</td>
<td class="min">3</td>
</tr>
<tr>
<td class="min">A</td>
<td class="min" bgcolor="#ffbbbb"><a class="fullcell" href="#">.</a></td>
<td class="min" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
</tr>
<tr>
<td class="min">B</td>
<td class="min" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
<td class="min" bgcolor="#ffbbff"><a class="fullcell" href="#"></a></td>
</tr>
</table>
<h1>Dimensions defined</h1>
<table border="1">
<tr>
<td class="defined">1</td>
<td class="defined">2</td>
<td class="defined">3</td>
</tr>
<tr>
<td class="defined">A</td>
<td class="defined" bgcolor="#ffbbbb"><a class="fullcell" href="#">.</a></td>
<td class="defined" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
</tr>
<tr>
<td class="defined">B</td>
<td class="defined" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
<td class="defined" bgcolor="#ffbbff"><a class="fullcell" href="#"></a></td>
</tr>
</table>
</body>
</html>