Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve table layout #185

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Improve table layout #185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
186174e
Add table examples
OndrejSpanel Apr 27, 2023
677ce79
Add horizontal layout
OndrejSpanel Apr 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion flying-saucer-examples/src/main/resources/demos/file-list.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ Z-index,demo:demos/zindex.xhtml
Cursors,demo:demos/cursors.xhtml
Report,demo:demos/report.xhtml
Forms,demo:demos/forms.xhtml
Legacy Tables,demo:demos/fullscreen-table.xhtml
CSS Tables,demo:demos/fullscreen-css-table.xhtml
Recipe in XML,demo:demos/cream-chicken-rice.xml
Centered Fluid,demo:demos/centered-fluid.xhtml
Centered Fluid Auto Margin,demo:demos/centered-fluid-automargin.xhtml
Expand All @@ -18,4 +20,4 @@ Threecol Fluid,demo:demos/3col-fluid.xhtml
Alice in Wonderland,demo:demos/alice/alice.xhtml
Hamlet,demo:demos/hamlet.xhtml
Game Screen,demo:demos/game/game-screen.xhtml
Unsupported,demo:demos/unsupported.xhtml
Unsupported,demo:demos/unsupported.xhtml
59 changes: 59 additions & 0 deletions flying-saucer-examples/src/main/resources/demos/fullscreen-css-table.xhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Layout using CSS Table</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.narrow {
width: 10%;
}
.wide {
width: 60%;
}
.header {
background-color: lightblue;
}
.main {
background-color: lightgreen;
}
.footer {
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="row header">
<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 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>
</div>
</div>
</body>
</html>
38 changes: 38 additions & 0 deletions flying-saucer-examples/src/main/resources/demos/fullscreen-table.xhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Layout using Table</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
table {
border-collapse: collapse;
width: 100%;
height: 100%;
}
.header {
background-color: lightblue;
}
.main {
background-color: lightgreen;
}
.footer {
background-color: lightcoral;
}
</style>
</head>
<body>
<table border="true">
<tbody>
<tr><td class="header">Header</td></tr>
<tr><td class="main">Main content area</td></tr>
<tr><td class="footer">Footer</td></tr>
</tbody>
</table>
</body>
</html>