开发者

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.

Opera <table> wrap bug

other famous browser do all good:

Opera <table> wrap bug


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜