Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Ширина ячейки в зависимости от смежных ячеек и независимо от содержимого (https://javascript.ru/forum/xhtml-html-css/71029-shirina-yachejjki-v-zavisimosti-ot-smezhnykh-yacheek-i-nezavisimo-ot-soderzhimogo.html)

fedushok 20.10.2017 10:54

Ширина ячейки в зависимости от смежных ячеек и независимо от содержимого
 
Вложений: 1
Как сделать <div> в ячейке №1 по ширине во всю ячейку вне зависимости от того, помещается в этот <div> весь текст по длине или нет? Ширина ячеек №2, 3, 4 известна, но для ячейки №3 ширина может меняться. В <div> ячейки №1 текст тоже будет меняться, но независимо от ширины ячейки №3.

ksa 20.10.2017 11:34

Цитата:

Сообщение от fedushok
<div> в ячейке №1 по ширине во всю ячейку
...
Ширина ячеек №2, 3, 4 известна, но для ячейки №3 ширина может меняться
...
В <div> ячейки №1 текст тоже будет меняться, но независимо от ширины ячейки №3

Нипанятна... :blink:
Ведь ширина ячейки 1 это сумма ширины ячеек 2 и 3. Т.ч. как она может быть независима?

И начинай уже сам делать тестовые примеры, не ленись. А то картинку кинул и все дела... :D ХТМЛ кто будет писать? Тексты тестовые вставлять за тебя кто будет?

fedushok 20.10.2017 11:54

Текстовый пример сделаю. Только пойму сначала точно, что это означает.

Когда текст вставляешь в див ячейки 1 её распирает и ячейка 1 становится по ширине больше чем нижележащие ячейки. В ответ на это нижележащие ячейки распирает. Это некрасиво.
Содержимое ячеек (ширину) 2 и 3 я знаю. Однако содержимое ячейки 3 может меняться.
Нужно чтобы ячейка 1 соответствовала по ширине суммарной ширине ячеек 2 и 3.
Не знаю прояснил ли я что-то. Наверное самое правильное начать с текстового примера. Это значит HTML и CSS прямо в сообщение кинуть?

Nexus 20.10.2017 12:02

fedushok,
Для форматирования кода его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

ksa 20.10.2017 13:46

Цитата:

Сообщение от fedushok
Текстовый пример сделаю. Только пойму сначала точно, что это означает.

Сделай, например, тот хтмл со стилями. На нем будет понятно как ты это делаешь и можно будет предложить альтернативные решения.

Высота ячеек фиксированная? Или какие-то будут растягиваться?
Верстка таблицей принципиальна?

fedushok 20.10.2017 16:08

table {
margin: 0 auto;
border-spacing: 3px;
border: 1px solid black;
}

table td {
border: 1px solid black;
}


<table border="1px">
    <tr>
        <td colspan="2">
            <div>
                <p style="border: 1px solid black;">
                    Текст текст текст текст текст текст текст текст текст текст текст текст текст
                </p>
            </div>
        </td>
        <td rowspan="2" style="width: 100px;">
        </td>
    </tr>
    <tr>
        <td style="width: 40px;">
        </td>
        <td>
            <div style="width: 100px; border: 1px solid black;">
                ширина и высота содержимого этой ячейки будет переменной в течении сеанса
            </div>
        </td>
    </tr>
</table>

fedushok 20.10.2017 16:12

1. Высота ячеек у правой ячейки (будет содержать раскрывающиеся диалоги) и средней нижней будет меняться. Но это растяжение вид никак не испортит. Рамок таблицы видно не будет.
2. Желательна табличная верстка
3. Почему рамки у таблицы появились только тогда когда я в табличный тег добавил border="1px"? Почему "border: 1px solid black;" не хватает?
4. Как сделать так чтобы ячейка таблицы была минимальной ширины или высоты? Чтобы в размер с содержимым.


Часовой пояс GMT +3, время: 15:28.