Add horizontal layout

flyingsaucerproject · Apr 27, 2023 · 677ce79 · 677ce79
1 parent 186174e
commit 677ce79
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/flying-saucer-examples/src/main/resources/demos/fullscreen-css-table.xhtml b/flying-saucer-examples/src/main/resources/demos/fullscreen-css-table.xhtml
@@ -12,6 +12,7 @@
       }
       .wrapper {
           display: table;
+          table-layout: fixed;
           width: 100%;
           height: 100%;
       }
@@ -21,6 +22,12 @@
       .cell {
           display: table-cell;
       }
+      .narrow {
+          width: 10%;
+      }
+      .wide {
+          width: 60%;
+      }
       .header {
           background-color: lightblue;
       }
@@ -35,10 +42,14 @@
 <body>
 <div class="wrapper">
   <div class="row header">
-    <div class="cell">Header</div>
+    <div class="cell narrow">Header A</div>
+    <div class="cell wide">Header B </div>
+    <div class="cell">Header C</div>
   </div>
   <div class="row main">
-    <div class="cell">Main content area</div>
+    <div class="cell">Main content area A</div>
+    <div class="cell">Main content area B</div>
+    <div class="cell">Main content area C</div>
   </div>
   <div class="row footer">
     <div class="cell">Footer</div>