MSDarkSpirit
New Member
I have a div container and its width is 150px.
The div has a table and its width is variable with its content that is a image list.
If the size of image list is larger than 150px then <td> will break a new line.
How to keep the image list in a line without breaking?
Our code can work on chrome but it can't work on IE9.
Following is my html code.
\[code\] <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>test</title> <style text="text/css"> .thumbnail{ float:left; } .NoBreak{ white-space:nowrap; word-break:keep-all } </style> </head> <body> <div style='width:150px;overflow:hidden;border:1px solid #ff0000;'> <table border='1' cellspacing='0' cellpadding='0'><tr height='40'><td nowrap class='NoBreak'> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> </td></tr></table> </div> </body></html>\[/code\]
The div has a table and its width is variable with its content that is a image list.
If the size of image list is larger than 150px then <td> will break a new line.
How to keep the image list in a line without breaking?
Our code can work on chrome but it can't work on IE9.
Following is my html code.
\[code\] <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>test</title> <style text="text/css"> .thumbnail{ float:left; } .NoBreak{ white-space:nowrap; word-break:keep-all } </style> </head> <body> <div style='width:150px;overflow:hidden;border:1px solid #ff0000;'> <table border='1' cellspacing='0' cellpadding='0'><tr height='40'><td nowrap class='NoBreak'> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> <img src='http://stackoverflow.com/questions/15884092/b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/> </td></tr></table> </div> </body></html>\[/code\]