Making table th width of table

HTML & CSS
1

Hi all

I have a jsfiddle here - https://jsfiddle.net/vudr9hL5/3/

I can make the make the th the width of a set number of td with colspan, but how do I make it the full width os the table if I don’t know how many td there will be. The content will be dynamically generatored.

2

Are you sure it should be a <th> and not a <caption>?

Could you not count the columns during the process?

3

So spell out what SamA74 says, if it is going to be dynamically generated, then it should be created by JavaScript and not hard-coded into HTML. So the JS to create the th will be dependent on the JS used to create the td. Have a counter for the td and apply it to the th. You can learn to use document.createElement for td as part of your dynamic generation, unless you already have another way figured out.

4

Remember that a table represents tabular data, and tabuar data is relational, that is any given cell relates to other cells , in its row or column. If your table heading encompasses ALL individual columns , it most logically refers to the table as a whole and not any ONE column. For that reason you would be better served by an Hx tag (or a caption , as Sam74 suggested)

After that, You can use CSS to style the element to look however you want.

3 Likes
5

Then as others have suggested you should dynamically generate the colspan server-side at the same time as you add the cells.

It is quite common to span a header across cells when the data rows have their own th at the left side so a caption is not always the right option. There are examples of that approach here and colspans will be necessary. :slight_smile:

1 Like
6

The thing that struck me must here is the “ALL”

My take on this was that the OP wanted the TH to span ALL columns( e.g.: a 5 column table with a TH with colspan=5 )
Essentially it’s saying ALL cells in the table can be categorized under that “heading”, which to me seems like redundant.

Let’s say you have a table denoting cars by make and model:

<table border="1">
	<tr>
		<th colspan="5">BRAND</th>
  	</tr>
	<tr>
		<th>Toyota</th>
		<th>Nissan</th>
		<th>Madza</th>
		<th>Ford</th>
		<th>VW</th>
 	</tr>
	<tr>
		<td>Camry</td>
		<td>Maxima</td>
		<td>M6</td>
		<td>Taurus</td>
		<td>Passat</td>
	</tr>
	<tr>
		<td>Corolla</td>
		<td>Altima</td>
		<td>M3</td>
		<td>Escort</td>
		<td>Jetta</td>
	</tr>
	<tr>
		<td>etc1</td>
		<td>etc2</td>
		<td>etc3</td>
		<td>etc4</td>
		<td>etc5</td>
 	</tr>
	<tr>
		<td>etc1</td>
		<td>etc2</td>
		<td>etc3</td>
		<td>etc4</td>
		<td>etc5</td>
 	</tr>
</table>

the “brand” is a common denominator to all cells.I would figure that while it can remain as a TH, it would make even more sense as heading to the table itself . I mean you wont ad another TH above the “brand” saying “cars”. So it doesn’t seem too far fetched to take that info out of the table and placing it into a header <h4>Cars by Make</h4>
IMHO, of course :slight_smile:

1 Like
7

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