123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- <html><head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <style type="text/css">
- .outer {
- display:table;
- height:20px;
- width:300px;
- max-width:300px;
- }
-
- .inner {
- background-color: silver;
- display:table-cell;
- height:20px;
- min-height:20px;
- width:150px;
- max-width:150px;
- padding: 4px;
- }
- .clip {
- overflow:hidden;
- width:-moz-fit-content;
- }
- </style>
- </head>
- <body>
- <h2>Testing CSS overflow on display:table-cell</h2>
- <div class="outer">
- <div class="inner">
- <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
- </div>
- </div>
- <div class="outer">
- <div class="inner">
- <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
- </div>
- </div>
- <div class="outer">
- <div class="inner">
- <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
- </div>
- </div>
- <div class="clip"><div class="outer">
- <div class="inner">
- <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
- </div>
- </div></div>
- <div class="outer">
- <div class="inner">
- <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
- </div>
- </div>
- <div class="clip"><div class="outer">
- <div class="inner">
- <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
- </div>
- </div></div>
- <h2>Testing CSS overflow on display:table</h2>
- <div class="outer">
- <div class="inner">
- <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
- </div>
- </div>
- <div class="outer">
- <div class="inner">
- <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
- </div>
- </div>
- <div class="outer">
- <div class="inner">
- <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
- </div>
- </div>
- <div class="clip"><div class="outer">
- <div class="inner">
- <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
- </div>
- </div></div>
- <div class="outer">
- <div class="inner">
- <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
- </div>
- </div>
- <div class="clip"><div class="outer">
- <div class="inner">
- <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
- </div>
- </div></div>
- </body></html>
|