Disable div with display: table-cell from stretch
I have the following HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Table-cell issue</title> <style type="text/css"> html, body { height: 100%; } .table { display: table; height: 100%; } .row { display: table-row; } .aside { display: table-cell; } .center { background-color: red; display: table-cell; width: 100%; } .wide { background-color: green; width: 16000px; } </style> </head> <body> <div class="table"> <div class="row"> <div class="aside"> Left column </div> <div class="center"> <div class="wide"> </div> </div> <div class="aside"> Right column </div> </div> </div> </body> </html> The problem is that div.center is stretched to fit its contents, while div.table is designed to occupy the entire viewport and the rest of the contents of div.center should be invisible. Neither overflow:hidden nor explicit width adjustment in pixels (e.g. 900px).
I would really appreciate any idea on how to fix this problem.
+6
Alexey
source share 1 answer
Use table-layout:fixed in the table div. This disables automatic resizing of the cell and makes the center as wide as you allow.
+4
SpliFF
source share