Как я могу установить ширину последнего столбца HTML-таблицы в процентах от доступной ширины? - PullRequest
Новая
       17

Как я могу установить ширину последнего столбца HTML-таблицы в процентах от доступной ширины?

0 голосов
/ 20 мая 2011

У меня есть таблица с двумя столбцами.Я установил ширину первого столбца, установив ширину его заголовка на 30%: 

#TableFirstHeader
{
    width: 30%;
}

Это прекрасно работает, но если я попытаюсь установить ширину второго заголовка на 65%: 

#TableSecondHeader
{
    width: 65%;
}

просто игнорируется.Я могу установить это значение на что угодно, и второй столбец всегда простирается до конца таблицы.

Все, что мне действительно нужно, - это разрыв в 5% между вторым столбцом и правой стороной таблицы.

Я попытался создать пустой столбец, установив заголовок шириной 5%, в котором ничего нет, но это ничего не дает.

Как я могу заставить этот столбец использовать только 65% от общей доступной ширины (или около 90% ширины, доступной для него, это тоже подойдет)?

Ответы [ 2 ]

2 голосов
/ 20 мая 2011 
<style type="text/css">
    table#YourTableId { width:95%; }
    th#TableFirstHeader { width:31.6%; }
    th#TableSecondHeader { width:68.4%; }
</style>

Второй th не обязательно должен быть назначен по ширине.Также вы можете использовать 

    table#YourTableId td:first-child { width:31.6%; }

.Дело вкуса.

Отредактировано отсюда:

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

Если второй столбец должен иметь ширину таблицы 65% (а не 70% при 5% заполнении справа): 

<style type="text/css">
    th#TableFirstHeader { width:30%; }
    th#TableSecondHeader { width:65%; }
    th#TableThirdHeader { width:5%; }
    div#Stretch { width:100%; }
</style>

<table>
    <tr>
    <th id="TableFirstHeader">Some Content</th>
    <th id="TableSecondHeader">Some Content</th>
    <th id="TableThirdHeader"><div id="Stretch"></div></th>
    </tr>
</table>

Пустой третий столбец рухнет.Пустой div со 100% шириной контейнера предотвращает такое поведение.

1 голос
/ 20 мая 2011

Вы не можете, все столбцы таблицы вместе составляют ширину таблицы.

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

...