How can I restrict the width of columns by defining a width attribute on the div.dcolumn DOM element to preserve the layout with overflowing cells? I want the content of any overflowing cell (like the 9px column) to be hidden while maintaining the specified width values. What are my options?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html style='height:100%'>
<head>
<style>
.header {
background-color: #eeeeee;
padding: 0 0 0 0;
border: 1px solid #cccccc;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
overflow: hidden;
}
.dtable {
display: table;
position: relative;
table-layout: fixed;
}
.drow {
display: table-row;
}
.dcell {
display: table-cell;
overflow: hidden;
padding: 0 0 0 0;
border: 1px solid #cccccc;
cursor: default;
}
.dcolumn {
display: table-column;
}
</style>
</head>
<body>
<div class="dtable" style="top: 0px; left: 0px; height: 125px;">
<div class="dcolumn" style="width: 39px;"></div>
<div class="dcolumn" style="width: 19px;"></div>
<div class="dcolumn" style="width: 9px;"></div>
<div class="dcolumn" style="width: 39px;"></div>
<div class="dcolumn" style="width: 19px;"></div>
<div class="drow header" style="height: 25px;">
<div class="dcell">0</div>
<div class="dcell">1</div>
<div class="dcell">2</div>
<div class="dcell">3</div>
<div class="dcell">4</div>
</div>
<div class="drow" style="height: 25px;">
<div class="dcell">0:0</div>
<div class="dcell">0:1</div>
<div class="dcell">long line not truncated</div>
<div class="dcell">0:3</div>
<div class="dcell">0:4</div>
</div>
<div class="drow" style="height: 25px;">
<div class="dcell">1:0</div>
<div class="dcell">1:1</div>
<div class="dcell">1:2</div>
<div class="dcell">1:3</div>
<div class="dcell">1:4</div>
</div>
</div>
</body>
</html>