显示表行宽度不固定

Question

我试图使div具有相同的高度，所以我使用了显示表，问题是宽度会增加。例如，尝试在tableright中添加内容，当它超过宽度时，它不会中断到下一行，但它将水平扩展到tableleft。

请指点。下面是示例代码

 <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>

Answer 1

你没有犯什么语法错误。

此外，为了确保在表格单元格中放置了一个大的不分隔字，我使用了“表布局:固定”；

看看这把小提琴：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;
}

Answer 2

因此，在这里添加宽度，只是一个示例，以显示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%;
}

演示

最终演示