Сделать строку таблицы кликабельной с помощью HTML и CSS
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Вы можете сделать всю строку таблицы кликабельной с помощью обработчиков событий JavaScript и правильного расположения тегов ссылок:
<style>
.full-width-link {
display: block;
width: 100%;
height: 100%;
}
</style>
<table>
<tr onclick="window.location='https://www.example.com';">
<td>
<a href="https://www.example.com" class="full-width-link">Кликните сюда!</a>
</td>
<td>Или здесь... В любом случае вы попадете на нужную страницу!</td>
</tr>
</table>
CSS-класс .full-width-link
позволяет ссылке занимать все доступное пространство внутри ячейки, улучшая таким образом удобство использования.

Устранение "мёртвых" зон
Каждый пиксель важен при навигации по сайту. Вы можете уменьшить некликабельные области, настроив отступы в CSS и расширив активную область:
td, th {
padding: 0;
}
.full-width-link {
display: block;
width: 100%;
height: 100%;
padding: 10px;
}
Применение современного Javascript
Используя такие современные методы JavaScript как querySelectorAll
и addEventListener
, Вы можете сделать строки таблицы кликабельными без привлечения библиотеки jQuery:
document.querySelectorAll('tr[data-href]').forEach(row => {
row.addEventListener('click', () => {
window.location = row.dataset.href;
});
});
Использование атрибута data-href для хранения URL делает код более читабельным и удобным для поддержки.
Построение структуры внутри ссылок
Чтобы избежать проблем с вложенностью блочных элементов в тегах <a>
, рекомендуется использовать более простой <span>
:
<td>
<a href="https://www.example.com" class="full-width-link">
<span class="link-content">На меня безопасно кликать!</span>
</a>
</td>
Визуализация
Воспринимайте каждую строку таблицы как новый уровень в игре на внимание пользователя:
Строка (Уровни игры) | Кликабельность |
---|---|
Уровень 1 🎮 | ✅ |
Уровень 2 🎮 | ✅ |
Уровень босса 🎮 | ✅ |
Каждый клик ассоциируйте с переходом на новый уровень. Идите вперед, играйте!
Эксперименты с гибкостью
Использование div
вместо элементов таблицы с применением CSS-стилей таблицы расширяет возможности для гибкости. Благодаря использованию события onClick
в JavaScript, вы получаете больше контроля над функциональностью.
Проверка совместимости с различными браузерами
Не забывайте, что стилизация ссылок как таблиц может вызвать проблемы совместимости в различных браузерах и на различных устройствах. Проводите обязательное тестирование на разных платформах.