Opera <table> wrap bug
I have following html/css:
<html>
<body>
<style type='text/css'>
.result_table table {
border-c开发者_如何学JAVAollapse:collapse;
}
.result_table table td {
white-space:nowrap;
max-width:200px;
overflow:hidden;
padding:4px;
max-height:24px;
height:24px;
}
</style>
<div class="result_table">
<table border=1><thead><tr><td>Title</td></tr></thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet, ...</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
when "Lorem impsum" has big length (more than 9000 symbols), Opera browser begins to wrap text, even though there is no break symbols and TD has nowrap and overflow directives.
other famous browser do all good:
Possible overflow-y:hidden
doesn't work with display:table-cell
in Opera. O possible solution is to add display:block
for .result_table table td
.
Demo: http://jsfiddle.net/qXjV8/
Another solution could be to wrap the text within the td
with a div and change the selector to .result_table table td div
Demo: http://jsfiddle.net/qXjV8/1/
In both cases I advice you to use a reset css like this: http://meyerweb.com/eric/tools/css/reset/
Also you will notice that in both cases the second line in Opera is partially visible. To solve this you can use line-height
property.
精彩评论