Таблица HTML: Как изменить размеры ячеек данных, когда уже указано «colspan»? - PullRequest
Новая
       11

Таблица HTML: Как изменить размеры ячеек данных, когда уже указано «colspan»?

0 голосов
/ 02 июня 2010

У меня есть табличные данные для отображения, которые имеют значение как для строк, так и для столбцов. Столбцы - это временные блоки, строки - дни. Конкретная ячейка данных ограничена одним днем, но может быть в нескольких временных интервалах. Чтобы показать это, я использую тег colspan. 

<div id = "GuideTable">
    <table>
    <tr>
        <td colspan = 3>
    </td></tr></table>
</div>

Или что угодно.

Я пытаюсь применить форматирование CSS ко всей таблице, и для изменения цвета и т. Д. Все хорошо, но я хочу иметь постоянную ширину - вот где я сталкиваюсь с проблемами.

В данный момент ширина каждой ячейки данных связана с максимальной шириной ее столбца (все автоматически выравнивается). Некоторые столбцы крошечные, другие огромные. Я пытаюсь сделать столбцы одинакового размера (даже если это означает, что каждый столбец настолько большой, насколько должен быть самый большой столбец), но установка ширины отдельных ячеек данных (либо через css, либо в самом теге) ни к чему не приводит. 1008 *

Я думаю, может быть, тег colspan перекрывает мою ручную ширину? Если это так, как я могу изменить ширину столбца в целом, особенно если они не определены явно? (Можете ли вы явно определить столбцы?)

Примеры используемого CSS: 

#GuideTable td{
background:#ffffff;
border-style: solid;
border-width: 1px;
width: 100px;
}

Ответы [ 3 ]

0 голосов
/ 02 июня 2010

Итак, я провел небольшой эксперимент, используя следующий код 

<html>
<head>
    <style type="text/css">
    td
    {
        width: 100px;
    }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td colspan="3">First Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td colspan="2">Row</td>
        </tr>
        <tr>
            <td>The</td>
            <td>Third</td>
            <td>Row</td>
        </tr>
    </table>
</body>
</html>

А Итоговая таблица имела общую ширину 300 пикселей (уступать или брать). и каждая ячейка была шириной 100 пикселей. Возможно, есть что-то еще, что влияет на ширину вашей ячейки. Попробуйте убрать CSS и добавить его обратно по частям, даже смешные вещи могут полностью испортить CSS (например, семейство шрифтов, приводящее к тому, что таблица вылетает влево, как я сейчас имею дело)

0 голосов
/ 28 июля 2010

(только что нашел при поиске чего-то другого)

Если вам не нужна поддержка IE6, вы можете использовать селектор атрибутов для сброса ширины ячеек с помощью colspan: 

td { width: 100px; }
td[colspan] { width: auto; }

Если вам нужно поддерживать IE6, вам нужно добавить класс в каждую ячейку с помощью colspan: 

<td colspan="2" class="colspan">...</td>

и 

td { width: 100px; }
td.colspan { width: auto; }
0 голосов
/ 02 июня 2010

Если бы вы могли привести пример, который был бы великолепен.

Таблица имеет много специальных свойств, ячейки всегда должны заполнять до 100% ширины таблицы - точка.

Если вы передадите ячейке свойство width, это сработает. CSS становится ненадежным, так как многие вещи не будут работать.

...