Hi all,
I'm working with content created in Flare 11. It is structured with tables, which functions similarly HTML and PDF. I'm now working on 2017 r2. The ideal result is a responsive layout in HTML and also output to PDF with minimal adjustment to the css. An equally good result would be to somehow transfer the tables to divs which are responsive. If anyone knows how to do either of these approaches, please can you help?
Many thanks in advance,
Michelle
Tables to divs?
-
Rene Severens
- Sr. Propeller Head
- Posts: 210
- Joined: Mon Sep 19, 2011 2:06 am
- Location: Netherlands - Zoetermeer
- Contact:
Re: Tables to divs?
Hi,
I think this is a nice idea.
Taken from an example form StackOverflow, maybe this points you towards a solution:
Greetings,
Rene Severens
===
<html>
<head>
<style>
.div-table {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px;
}
.div-table-row {
display: table-row;
width: auto;
clear: both;
}
.div-table-col {
float: left;
display: table-column;
width: 200px; /* calculate column width so it fits in the PDF */
background-color: #ccc;
}
</style>
</head>
<body>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col" align="center">Customer ID</div>
<div class="div-table-col">Customer Name</div>
<div class="div-table-col">Customer Address</div>
</div>
<div class="div-table-row">
<div class="div-table-col">001</div>
<div class="div-table-col">002</div>
<div class="div-table-col">003</div>
</div>
<div class="div-table-row">
<div class="div-table-col">xxx</div>
<div class="div-table-col">yyy</div>
<div class="div-table-col">www</div>
</div>
<div class="div-table-row">
<div class="div-table-col">ttt</div>
<div class="div-table-col">uuu</div>
<div class="div-table-col">Mkkk</div>
</div>
</div>
</body>
</html>
I think this is a nice idea.
Taken from an example form StackOverflow, maybe this points you towards a solution:
Greetings,
Rene Severens
===
<html>
<head>
<style>
.div-table {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px;
}
.div-table-row {
display: table-row;
width: auto;
clear: both;
}
.div-table-col {
float: left;
display: table-column;
width: 200px; /* calculate column width so it fits in the PDF */
background-color: #ccc;
}
</style>
</head>
<body>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col" align="center">Customer ID</div>
<div class="div-table-col">Customer Name</div>
<div class="div-table-col">Customer Address</div>
</div>
<div class="div-table-row">
<div class="div-table-col">001</div>
<div class="div-table-col">002</div>
<div class="div-table-col">003</div>
</div>
<div class="div-table-row">
<div class="div-table-col">xxx</div>
<div class="div-table-col">yyy</div>
<div class="div-table-col">www</div>
</div>
<div class="div-table-row">
<div class="div-table-col">ttt</div>
<div class="div-table-col">uuu</div>
<div class="div-table-col">Mkkk</div>
</div>
</div>
</body>
</html>
"The numbers are strange today; they somehow do not seem to add up."