I want to create a dialog with a title, borders (left, right, bottom) as well as the content. The current source code:
<html>
<body>
<div style="background: #0ff; width: 152px; height: 112px; position: absolute; top: 24px; left: 128px; display: table">
<div style="display: table-row;">
<div style="background: #f00; width: 100%; display: table-cell;height: 24px;">top</div>
</div>
<div style="display: table-row;">
<div style="background: #0f0; width: 100%; display: table-cell;">
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div>
<div style="display: table-cell;">
<div style="overflow: scroll; white-space: nowrap">
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
</div>
</div>
<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div>
</div>
</div>
</div>
</div>
<div style="display: table-row;">
<div style="background: #000; width: 100%; display: table-cell; height: 4px;"></div>
</div>
</div>
</body>
</html>
produces an output of
what happened to the left and the right borders and why does the size exceed the width specified in the top parent (152px)?
If you’re going to use a table, use a table. Setting the display of block elements to mimic various table elements is problematic at best, and very unpredictable cross-browser.