HTML table column widths not respected in the contact form

bcobb10b · 2016-07-09 12:47:38

I cannot get a table I added to the Backlight Contact page Main Copy area to respect specified column widths. I gave up on my table and used table HTML code Matthew suggested in another (CE4) post. Results were the same.

The table width stretches to fill the entire Main Copy area width, and looks rather silly.

Same with code from a w3schools example (used as a sanity check). It works fine on their "try it" sample, limiting column widths to the specified values, but not on the Backlight contact page. I have not tried adding a table to other pages.

Is there a way to cause this table to respect the specified width?

Thanks,

Bill

rod barbee · 2016-07-09 13:35:54

Take a look at the compatibility note on this page: http://www.w3schools.com/tags/att_col_width.asp
The col width attribute is not supported in html5

rod barbee · 2016-07-09 13:38:14

Try this
http://www.html5-tutorials.org/tables/c … umn-width/

bcobb10b · 2016-07-09 13:56:44

rod barbee wrote:

Try this
http://www.html5-tutorials.org/tables/c … umn-width/

Tried it ... no love. I changed the %s to narrow the table and it still filled the page. See at:
http://www.kurtsalumni.com/contact/

What you will see is with this spec, tweaked from the example you referenced.

bcobb10b · 2016-07-09 14:05:17

I know tables are discouraged for formatting data because at times they don't scale well, but sometimes they are the only option.

I can live with the hand spaced names, email addresses and phone numbers on my contact page (spaced out using non-breaking spaces " "), but sometime in the future I will need to use a table.

Thanks for the input.

Bill

bcobb10b · 2016-07-09 15:15:11

Matthew, after playing with tables in my Backlight site versus how they are handled in static sites, I now see why Backlight tables act the way they do. Tables don't scale at all in normal sites, but in Backlight sites they scale nicely. I would like to have tables that don't fill the entire width, but if that isn't possible without breaking their smooth scaling, it won't be worth it. I will figure out ways to work with what you have given us. Good job -- u da man!

Matthew · 2016-07-09 16:17:10

Hi Bill,

Basic markup for a table looks like this:

<table>

	<thead>
		<tr>
			<td>Column 01</td>
			<td>Column 02</td>
			<td>Column 03</td>
		</tr>		
	</thead>

	<tbody>

		<tr>
			<td>Col 01, Row 01</td>
			<td>Col 02, Row 01</td>
			<td>Col 03, Row 01</td>
		</tr>		

		<tr>
			<td>Col 01, Row 02</td>
			<td>Col 02, Row 02</td>
			<td>Col 03, Row 02</td>
		</tr>		

	</tbody>

</table>

If you'd then like to start specifying widths of things, you can do so like this:

<table style="max-width: 640px;">

	<thead>
		<tr>
			<td style="width: 50%;">Column 01</td>
			<td style="width: 25%;">Column 02</td>
			<td style="width: 25%;">Column 03</td>
		</tr>		
	</thead>

	<tbody>

		<tr>
			<td>Col 01, Row 01</td>
			<td>Col 02, Row 01</td>
			<td>Col 03, Row 01</td>
		</tr>		

		<tr>
			<td>Col 01, Row 02</td>
			<td>Col 02, Row 02</td>
			<td>Col 03, Row 02</td>
		</tr>		

	</tbody>

</table>

It is sufficient to set the width for columns only for the top-most cells, as the rest of the column with follow suit. Also remember that your column widths are based on 100% of the table. So if you set the table width as 50%, then the columns as 20%, 15% and 15% as in your original example, then your columns will only take half the width of the table -- the table will be 50% of its container, and your columns will fill only 50% of your table. Instead, the columns should tally up to a full 100%, as in my example above.

Cheers,
Matt

bcobb10b · 2016-07-14 10:55:17

Thanks Matthew -- somehow I missed your post of 7/9 -- just saw it over in the Backlight Tips & Tricks section. Your suggestion of 7/9 works like a charm!

Very happy with the new product no issues with the latest release so far. Enjoy your time away.

- Bill

Matthew · 2016-07-14 14:17:56

Glad to hear, Bill! We mostly hear issues here in the forum, so it's always good to hear that people are running smoothly.

Community @ The Turning Gate

#1 2016-07-09 12:47:38

HTML table column widths not respected in the contact form

#2 2016-07-09 13:35:54

Re: HTML table column widths not respected in the contact form

#3 2016-07-09 13:38:14

Re: HTML table column widths not respected in the contact form

#4 2016-07-09 13:56:44

Re: HTML table column widths not respected in the contact form

#5 2016-07-09 14:05:17

Re: HTML table column widths not respected in the contact form

#6 2016-07-09 15:15:11

Re: HTML table column widths not respected in the contact form

#7 2016-07-09 16:17:10

Re: HTML table column widths not respected in the contact form

#8 2016-07-14 10:55:17

Re: HTML table column widths not respected in the contact form

#9 2016-07-14 14:17:56

Re: HTML table column widths not respected in the contact form

Board footer