Сделайте <th>кликабельным: установка элемента <a>внутри <th>на 100% ширины и высоты - PullRequest
Новая
       6

Сделайте <th>кликабельным: установка элемента <a>внутри <th>на 100% ширины и высоты

1 голос
/ 26 мая 2009

У меня проблема css, на которой я застрял .. Я не могу получить кликабельные ссылки заголовка, чтобы получить 100% высоты; без использования JavaScript.

Я пробовал много вещей, которые нашел во время поиска в Google, но ни одна из них не решила мою проблему.

Я получаю этот результат:

альтернативный текст http://thomasstock.net/css100percent.jpg

Это мой HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>
                    <a href="#">header 1</a>
                </th>
                <th>
                    <a href="#">some very very very very very very very very very long header 2</a>
                </th>
                <th>
                    <a href="#">3</a>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    cell a1
                </td>
                <td>
                    cell a2
                </td>
                <td>
                    cell a3
                </td>
            </tr>
            <tr>
                <td>
                    cell b1
                </td>
                <td>
                    cell b2
                </td>
                <td>
                    cell b3
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

С этим css: 

table
{
    width: 300px;
    border-collapse: collapse;
}
th, td
{
    border: solid 1px;
}

th a
{
    background-color: Fuchsia;

    /* Making the headerlinks 100% width */
    width:100%;
    float:left;

    /* Making the headerlinks 100% height ??? */
    height: 100%; /* doesnt work! */
    min-height:100%;
}
tr
{
    height:100%;
}

скачать этот код здесь

=> Как сделать заголовки полностью розовыми и кликабельными? (без использования javascript?)

Ответы [ 4 ]

11 голосов
/ 26 мая 2009

Вы должны отобразить a внутри th s как элемент уровня блока : 

th a {
    display: block;
}
2 голосов
/ 26 мая 2009

Вам необходимо установить display:block для ваших ссылок в заголовках. высота: атрибуты ширины игнорируются на встроенных элементах; 

th a
{
    display:block;
    background-color: Fuchsia;

    /* Making the headerlinks 100% width */
    width:100%;

    /* Making the headerlinks 100% height ??? */
    height: 100%;
}

Edit: Забыл упомянуть, что для обеспечения 100% роста родитель должен иметь указанную высоту, например, 

th 
{
    height: 40px;
}
0 голосов
/ 27 мая 2009

Вы можете установить произвольную высоту для каждой ссылки достаточно длинной: (может быть, 6em?), А затем установить максимальную высоту для ячейки таблицы th на более короткую: (3em?) Со скрытым переполнением. Таким образом, все ссылки будут выше, чем ячейка таблицы, но отрублены скрытым переполнением - все они должны быть розовыми и кликабельными. Убедитесь, что вы установили display:relative; на th, в противном случае старые версии IE не будут устранять переполнение. Удачи:)

0 голосов
/ 27 мая 2009

Возможно не правдоподобно, но в некоторых случаях установка 

th {
    white-space: nowrap;
}

Полностью избавляется от проблемы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...