Jump to content

Split DIV across Header,HTML Block, Footer


Recommended Posts

I am trying to build a div-based table in a Tabular Report.   I have deleted all of the fields and included a Header/Footer and HTML block.  I have turned off the HTML Editor which kept closing my <div>s automatically

 

Problem:  Titles (cell header) don't line up over top the grid properly.   The first one covers the entire table and the next three are pushed right as though they are being added after the table.   I'm confused.   I thought I'd be able to build table-based divs with the HTML blocks of Caspio.

 

***********************************************************************************

The header block:

<style media="screen" type="text/css">.table {
    display:table;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    padding:2px;
}
.header {
    font-weight:bold;
    text-align:center;
}
</style>

<strong>[@field:tblProduct_strProductName]</strong>
<hr /> 
Sample Size: [@field:tblProduct_dblSampleSize#]&nbsp;[@field:tblProduct_strSampleSizeUnit]
<hr />
<div class="table">
   <div class="row">
      <div class="cell header">Field 1</div>
      <div class="cell header">Field 2</div>
      <div class="cell header">Field 3</div>
      <div class="cell header">Field 4</div>
   </div>

***********************************************************************************

The HTML Block

<div class="row">
   <div class="cell"><strong>[@field:tblProductAssay_strAssayName]</strong></div>

  <div class="cell">[@field:tblProductAssay_dblNormalLow#]-[@field:tblProductAssay_dblNormalHigh#]&nbsp;[@field:tblProductAssay_strNormalUnit]</div>

   <div class="cell">[@field:tblProductAssay_dblAMRLow#]-[@field:tblProductAssay_dblAMRHigh#]&nbsp;[@field:tblProductAssay_strAMRUnit]</div>

   <div class="cell">[@field:tblProductAssay_memIFU]</div>
</div>

***********************************************************************************

The footer block

</div>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...