HTML - для таблицы, как сделать так, чтобы один столбец был плавным, не нарушая компоновку

Question

У меня есть следующее:

<div style="width:100%;">

 <table>
  <tr>
    <td style="width:30px;">hi</td>
    <td style="width:40px;">hi</td>

    <td id="lotoftext" style="width:auto;white-space:nowrap;overflow:hidden;">LOTS Of text in here, LOTS</td>

    <td style="width:25px;">hi</td>
  </tr>
 </table>

</div>

Я хочу, чтобы эта таблица выросла до 100% от возможного внешнего DIV. Проблема в том, что таблица с большим количеством текста ID = 'lotoftext' заставляет таблицу увеличиваться на ширину, превышающую внешний div, что затем разрывает страницу.

Есть идеи? спасибо

Answer 1

AnApprentice, чтобы достичь этого макета, используя DIV и CSS (альтернативный вариант использования таблиц), вы можете подойти к ситуации, подобной этой:

CSS:

#body_container{
    max-width:700px;
}

.data-container{
    background-color:#ccc;
    zoom:1;
}

.data-content_a{
    width:30px;
    float:left;
    background-color:#3FF;
}

.data-content_b{
    width:40px;
    float:left;
    background-color:#CF0;
}

.data-content_c{
    width:25px;
    float:right;
    background-color:#9FF;
}

.data-content_lotsoftext{
    float:left;
    background-color:#FCF;
    margin:-20px 26px 0 71px;
    clear:left;
    display:inline;
}

.clear{
    clear:both;
    padding:0;
    margin:0;
}

HTML:

<div id="body_container">
    <div class="data-container">
        <div class="data-content_c">4</div>
        <div class="data-content_a">1</div>
        <div class="data-content_b">2</div>
        <div class="data-content_lotsoftext">lots of text goes here!</div>
    <div class="clear"></div>
    </div>
</div>

#body_container (или внешний контейнер) можно установить на любую ширину или без ширины.Левое поле на .data-content_lotsoftext представляет собой объединенную ширину .data-content_a и .data-content_b (70px + 1px для безопасной стороны), а правое поле на .data-content_lotsoftext представляет собой ширину data-content_c (25px + 1pxчтобы быть в безопасности).

Если не назначить ширину .data-content_lotsoftext, она автоматически растянется до полной ширины.display:inline помогает ему лучше сидеть в ie6.

Протестировано в Firefox, Chrome, IE8, IE7 и IE6 (IE6 и 7 немного сбиты с толку - если кто-нибудь мог бы помочь улучшить CSS, чтобы заставить его работать идеально вIE6 и 7, пожалуйста, кричите!)

Надеюсь, это поможет.Dan

Answer 2

Если это не табличные данные, вы должны создавать их с использованием DIV и CSS. Таким образом вы сможете достичь желаемого с меньшей головной болью.

Answer 3

Сценарий, который вы описываете, просто не подходит для таблицы.Таблица должна использоваться только при отображении табличных данных.Вы должны использовать некоторые другие виды html-элементов для построения своей структуры и стилизации с помощью CSS.

Answer 4

вы можете использовать максимальная ширина ?Возможно, вам понадобится поместить div внутри этого конкретного TD и задать максимальную ширину