App controls won't play nice within a table

I wanted to do an app with an interface that splits the left and right hands of the page. Controls would go on the left and the results of those choices would be displayed on the right. I'm no expert but I thought a table would be a good way of achieving this. I've have it working vertically but requires more scrolling than I would like.

In the picture on the right it shows how a table would be displayed without any controls and then again with a color control (width=2) embedded. As you can see the technique is unusable as is.

Given that I only have a modest knowledge of CSS and HTML I thought I'd ask to see if there was another method where I could constrain the controls into being better neighbors.

Any help much appreciated. Code to follow.

        section {
			//Establish the table style
			HTML = "<style>table.tb {width:50%;height:10%} .tb th, .tb td {border:solid 2px #000000;padding:3px } .tb th {background:#90c226;color:#000000;text-align:Center;font-size:10px}.tb tr{background:#bfe373;color:#000000;text-align:Center}</style>"
			paragraph HTML

			//Add a table
			paragraph "<body><table class='tb'><tr><td>R1C1</td><td>R2C2</td></tr></table></body>"

			//Start a table
			paragraph "<body><table class='tb'><tr><td>R1C1"
			//add a control
			input "myTextColor", "color", title: "<b>Text Color ${myTextColor}</b>", required: false, submitOnChange: true, width: 2, defaultValue: "#000000"  
			//input "isVerbose2", "bool", title: "Verbose Debug2", required: false, multiple: false, defaultValue: false, submitOnChange: true, width: 1  
			//close the table
            paragraph "</td><td>R2C2</td></tr></tbody></table></body></html>"

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.