Блог

Главная - Вопросы по программированию - как настроить ширину первой ячейки таблицы с помощью CSS

как настроить ширину первой ячейки таблицы с помощью CSS

#css #css-float #stylesheet

#css #css-float #таблица стилей

Вопрос:

У меня есть структура html, как показано ниже.

 <style>
.divcontainer
{
    width:100%

}
.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}  

</style>
<div class="divcontainer">
    <table width="100%">
        <tr>
            <td valign="top">
                <div class="left_menu">
                    1
                </div>
            </td>
            <td>
                <div>
                    2</div>
            </td>

        </tr>
    </table>
</div>

Мне нужно создать структуру, как на картинке нижепример

но я не хочу применять стили к TD. Ширина td должна регулироваться с помощью классов, применяемых к дочернему div. Короче говоря, мой первый td должен занимать 25% от tr, а второй должен занимать оставшиеся 75%.Кто-нибудь может пролить свет на то, как это сделать?

Ответ №1:

Вы можете установить для второй td hudge width . Затем он примет доступную максимальную ширину и сначала td сократится до своего содержимого. http://jsfiddle.net/f5q3E /

в основном здесь вам нужно установить :

 td {
    background:red;
}
td td {
    width:100%;
    background:blue;
}

Первый td будет подстраиваться под его содержимое и размер div, если таковой имеется, второй td будет использовать оставшееся пространство.

Комментарии:

1. отлично. именно то, что я ищу. еще один запрос. Как я могу упомянуть об этом для конкретного div? т.е. мне нужно применить приведенный выше стиль к div divcontainer.

2. что вы имеете в виду, для контейнера div?

3. Я понял. .divcontainer td { background:red; } .divcontainer td td { width:100%; background:blue; } сделал свое дело. Спасибо.

Ответ №2:

Существует так много способов справиться с этим — вот один — СКРИПКА — и это не лучше, чем любой другой подход.

Я просто немного смущен окраской ваших tds и окраской divs, которые входят в них.

Если вы можете рассказать нам о целях того, что вы хотите сделать, возможно, мы можем внести некоторые другие предложения, например, не использовать table для layout — divs? плавающие divs?

CSS

 table tr td:nth-child(1) {
    width: 25%;
    background-color: red;
}
table tr td:nth-child(2) {
    width: 75%;
    background-color: blue;
    color: white;
}