Не отображать ширину строки таблицы

0

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

Пожалуйста посоветуй. Ниже приведен пример кода

 <div id="maintable">
    <div id="table-row">
    <div id="tableleft></div>
    <div id="tableright></div>
    </div>
    </div>

    <style>
    #maintable
    {display:table;
    width:100%;
    }
    #table-row
    {
    display:table-row
    width:100%;
    }
    #tableleft
    {
    width:60%;
    display:table-cell;
    }
    #tableright
    {
    width:40%;
    display:table-cell;
    }
    </style>
Теги:

2 ответа

0
Лучший ответ

Вы сделали небольшую синтаксическую ошибку.

Далее, чтобы убедиться, что в табличной ячейке помещено одно большое несвязанное слово, я использовал "table-layout: fixed";

проверьте эту скрипту: http://jsfiddle.net/5q9K8/17/

HTML:

<div id="maintable">
    <div id="table-row">
        <div id="tableleft">lorem</div>
        <div id="tableright">ipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsum</div>
    </div>
</div>

Css:

#maintable
{
    display:table;
    width:100%;
    table-layout: fixed;
    word-wrap:break-word;    
}
#table-row
{
    display:table-row;
    width:100%;
}
#tableleft
{
    width:60%;
    display:table-cell;
    background: #eef;
}
#tableright
{
    width:40%;
    display:table-cell;
    background: #efe;
}
  • 0
    Попробуйте поместить больше слов в таблицу, и вы увидите, что текст не будет разбит на следующую строку
  • 0
    Переходит к следующей строке, проверьте это: jsfiddle.net/5q9K8/14 Можете ли вы ввести одно длинное слово без пробелов?
Показать ещё 3 комментария
0

Добавьте ширину, как здесь, здесь просто пример, чтобы показать высоту div, равную высоте таблицы.

CSS

.maintable {
    width:100%;
    display: table;
    border: 1px solid blue;
}

.maintable .table-row {
    display: table-row;
    border: 2px solid black;
}

.maintable .table-row .tableleft, .maintable .table-row .tableright {
    display: table-cell;
    border: 4px solid red;
}

.tableright {
    width: 60%;
}
.tableleft {
    width: 40%;
}

DEMO

Заключительный ДЕМО

  • 0
    мне нужна ширина для левого и правого стола
  • 0
    я отредактировал это, есть локк

Ещё вопросы

Сообщество Overcoder
Наверх
Меню