Убедитесь, что кликабельна вся строка, содержащая имя файла, а не только текст. ⇐ CSS

[Anonymous]

У меня проблема с HTML-кодом, который я использую для mod_autoindex. Проблема в том, что я хочу, чтобы вся строка в имени строки, когда мы помещаем курсор, стала кликабельной. Но вот что случилось: мне нужно выбрать имя файла и нажать, чтобы перейти в подкаталог. Вот как выглядит мой html-файл:

Код: Выделить всё

Index of /


body {
font-family: Arial, sans-serif;
background: url('hide') no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 10;
}

.container {
backdrop-filter: blur(80px); /* Blurs the background behind the container */
-webkit-backdrop-filter: blur(80px); /* For Safari */
margin: 0 auto;
padding: 20px;
width: 80%;
max-width: 1000px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
overflow: hidden; /* Ensure content does not overflow */
}

tr td:first-of-type {
padding-left: 10px;
padding-right: 10px;
}

th {
text-align: left;
font-size: .75em;
padding-right: 20px;
}

tr.indexhead{
border-bottom: 2px solid #999;
}

.odd {
background-color: rgb(244, 244, 244);
}
@media (prefers-color-scheme: dark) {
.odd {
background-color: rgb(50, 50, 50);
}
tr {
outline: 0;
border: 0;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 15px;
border: 0px solid #ddd;
text-overflow: ellipsis; /* Add ellipsis for overflowing text */
overflow: hidden;
white-space: nowrap;
}

th + th {
width: 65%;
}

th {
background-color: ##00ffb3;
}

a {
text-decoration: none;
color: #ffffff;
}

tr {
transition: background-color 0.3s ease; /* Smooth transition for background-color change */
}

tr:hover {
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background on hover */
cursor: pointer; /* Change cursor to pointer on hover */
}

a:hover {
text-decoration: underline;
}

/* Media Queries for Mobile Devices */
@media only screen and (max-width: 600px) {
.container {
width: 95%;
padding: 10px;
}

th, td {
padding: 10px;
white-space: normal; /* Allow wrapping of text */
text-align: left; /* Align text to left for better readability */
overflow-wrap: break-word; /* Break long words */
}

h1 {
font-size: 1.5em;
}

p {
font-size: 1em;
}
img.round {
border-radius: 50%;

}
}


function isMobile() {
return window.matchMedia("only screen and (max-width: 760px)").matches;
}

window.onload = function() {
if (isMobile()) {
document.body.style.fontSize = '16px';
document.querySelector('.container').style.width = '95%';
document.querySelector('.container').style.padding = '10px';
var cells = document.querySelectorAll('td, th');
for (var i = 0; i < cells.length;  i++) {
cells[i].style.whiteSpace = 'normal';
cells[i].style.textAlign = 'left';
cells[i].style.overflowWrap = 'break-word';
}
}
var backgroundImages = [
'hide',
'hide',
'hide',
'hide'
];
// Récupérer l'index actuel de localStorage ou initialiser à 0
var currentIndex = parseInt(localStorage.getItem('backgroundImageIndex')) || 0;

// Appliquer l'image actuelle comme fond du body
document.body.style.backgroundImage = 'url(' + backgroundImages[currentIndex] + ')';

// Incrémenter l'index pour la prochaine fois
currentIndex = (currentIndex + 1) % backgroundImages.length;

// Stocker le nouvel index dans localStorage
localStorage.setItem('backgroundImageIndex', currentIndex);
var rows = document.querySelectorAll('tr[data-href]');
rows.forEach(function(row) {
row.addEventListener('click', function() {
window.location.href = row.getAttribute('data-href');

var text = row.getElementsByTagName('td')[1].textContent.toLowerCase();
var val = _input.value.toLowerCase();

};





[img]hide[/img]

Я пытался напрямую вставить href, но это не помогло.
Здесь, когда я помещаю курсор и пытаюсь щелкнуть, он перенаправляется ни на что< /p>
И там меня перенаправят
Я хочу, чтобы когда мой курсор находился в разделе имени, как на скриншоте, я мог перейти в каталог и не ставить курсор в текст.

Подробнее здесь: https://stackoverflow.com/questions/786 ... not-just-t