Как в HTML в таблице строки (tr) можно сделать ссылками?

Question

[eldar_web]

Перед tr писал а, но он не принимает эти тэги. Как можно найти решение?

Answer 1

[Котик Антон]

Перед tr писал а, но он не принимает эти тэги.

Так делать нельзя, потому что tr может лежать только внутри table, tbody, thead или tfoot:
www.w3.org/TR/html5/tabular-data.html#the-tr-element

codepen.io/27cm/pen/MaGmdQ

<style>
.table {
    display: table;
}

.table > a {
    display: table-row;
}

.table > a > div {
    display: table-cell;
}
</style>
<div class="table">
    <a href="#">
        <div>1-1</div><div>1-2</div><div>1-3</div>
    </a>
    <a href="#">
        <div>2-1</div><div>2-2</div><div>2-3</div>
    </a>
</div>

Вариант с JavaScript:

<table>
    <tr onclick="document.location = 'example.com';">
        <td>1-1</td><td>1-2</td><td>1-3</td>
    </tr>
    <tr onclick="document.location = 'example.com';">
        <td>2-1</td><td>2-2</td><td>2-3</td>
    </tr>
</table>

Answer 2

[Aleks Front]

Я бы дополнил так.

<table class="linkRow">
    <tr data-href="http://example.com"> // все же html 5 сочтет это куда более приемлемым вариантом :)
        ...
    </tr>
</table>

<script>
...
$('body').on('click', '.linkRow tr', function(e){
    e.prevenDefault; // на случай если вместо <tr> кто то захочет поставить поставить <a href="#"><tr>
    document.location.href = $(this).data('href');
})
...
</script>

Но лучше знать задачу полностью, так как тег tr не обладает css свойствами близким к тегу a, что порой не обходимо. И в таких случаях лучше воспользоваться, примером их но не всегда актуально.

Comments

[gsmcatcher]

Применил ваш пример. Работает, но мобильные устройства не поддерживает

Answer 3

[SMAILAIMEN]

a href="#">NAME