HTML table in data page for alignment - Caspio forcing <td> cells cbHTMLBlockContainer

[roattw]

I really need to use an HTML table to apply some column structure to a Submission Form.  Need explanatory headings to align over their respective fields. Using HTML section in the data page I can begin to build this structure but for every <td> cell I put in an HTML block Caspio adds another <td> (cbHTMLBlockContainer) just for the html block thereby misaligning everything.

I really need the data field to align under the explanatory top row headings above it.

 

[Roosta]

Hi @roattw

If this is a submission form I assume you mean something like this;

 

Where you can have headings over each section? If so you can split the form up into sections with columns to suit and have HTML block in-between their own sections set at 1 column to span the page like this;

This is one column proceeded by the HTML block with the next section containing the submission form fields;

You will have to experiment (a lot!) to get decent results and spacing for your whole form as if you start mixing section columns other then 1 and X (in my case X = 5) it will space them to overcome this I either used columns of 1 or 5 and if required less then 5 used 1 and had the elements continue on the same line.

Your other option would be to build a full HTML table within the HTML block something similar to this;

<style>
.wrapper {
 background-color: lightgray;
 padding: 5px;
}
td {
 padding: 10px;
}
</style>
<table border="0" cellpadding="1" cellspacing="1" style="width:100%;">
	<tbody>
		<tr>
			<td><strong>Some Data 1</strong></td>
			<td><strong>Some Data 2</strong></td>
			<td><strong>Some Data 3</strong></td>
		</tr>
		<tr>
			<td class="wrapper">[@field:Some_Data_1]</td>
			<td class="wrapper">[@field:Some_Data_2]</td>
			<td class="wrapper">[@field:Some_Data_3]</td>
		</tr>
		<tr>
			<td><strong>Some Data 4</strong></td>
			<td><strong>Some Data 5</strong></td>
			<td><strong>Some Data 6</strong></td>
		</tr>
		<tr>
			<td class="wrapper">[@field:Some_Data_4]</td>
			<td class="wrapper">[@field:Some_Data_5]</td>
			<td class="wrapper">[@field:Some_Data_6]</td>
		</tr>
	</tbody>
</table>

Which would result in something like;

 

Again you would have to experiment with layout to match the rest of your form/fields but may be a possible solution but without  seeing exactly what you want as an end result its a bit hard to offer any further advise.

 

Good luck, Roosta

 

[roattw]

Roosta, thank you very much.  

This is a great and informative response.  Will see where mine differs from how you have it.  This will be helpful to many.

[roattw]

Going back a little on this.  Does setting form to responsive trash this approach?