Table COLSPAN to end of Row

HTML & CSS
#1

I have a table where the data is displayed in pairs of rows
see example below.
In this case,
the first row two columns and the second column has been set to span the three remaining columns and,
the second row has 4 columns,
so everything lines up at the end.
HOWEVER
my table is created dynamically and in order to do this I need to work out which row has the most columns so I can set the COLSPAN attribute correctly.

My question is, “Is there a way to tell a table cell to span all the way to the end of the row without knowing in advance how many columns that entails”:

DataM DataN
Data1 Data1 Data1 Data1
#2

Not 100% what you are asking…

If you count the cols, using a simple variable to count how many cols there are, just use that number to set the span’s correctly…
In PHP, you can count data or just use a COUNT(array-name) to know the number…

#3

I am looking for a way to not have to count.

If I have to count then I have to go through the data twice. In the original example, if I knew that the max was 4 columns then in the first line I can tell column two to span the last 3 columns but what I would like to do is not count and then when I tell it to print line 1, that I just say to column 2 to span to then end. (But not span 3 because that is not known in this scenario)

#4

You get the data from somewhere. Such as a query or from code that builds the data.
You just count the data as you build it and then when you create the table, you already know the span.
Without knowing more of your code, we can not help you. Perhaps you can explain how you create the
data in the first place.

#5

You have to do that (there’s no magic or time travel in programming.) You have to determine the maximum count, then you have to produce the output.

I think this is more of a - how to implement this for dynamic data question. See the following example -

// fetch your data into an array variable -
// fake some fetched data
$data[] = ['DataM','DataN'];
$data[] = ['Data1','Data1','Data1','Data1'];

// call-back function to get a count of each row of data
function _count($arr)
{
	return count($arr);
}

// find the row counts
$counts = array_map('_count',$data);
// get the maximum count, e.g. 4
$max = max($counts);

echo "<table>\n";
foreach($data as $row)
{
	echo '<tr>';
	$last = count($row); // 1..4
	foreach(range(1,$last) as $current)
	{
		// if at the last element in the row, determine if need to output colspan
		$cs = '';
		if($current == $last && $current < $max)
		{
			$cs = ' colspan="'.($max - $current + 1).'"';
		}
		$index = $current - 1;
		echo "<td$cs>{$row[$index]}</td>";
	}
	echo "</tr>\n";
}
echo '</table>';
#6

OK guys, I think I have sorted it with a little help from chatGPT who/that (I wonder what pronoun to use, said just use COLSPAN=‘100%’
ScreenHunter 404

The example below shows the last cell as COLSPAN=‘100%’ and it makes the last cell automatically span to the end. Unfortunately help.php does not allow me to show the cell borders so it’s hard to see here that it works.

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h1>The td colspan attribute</h1>

<table border='1' style='border-collapse:collapse;'>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <TH colspan=100%>Test Head 100%</TD>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
     <TD>testX</TD>
    <TD COLSPAN='100%'>testY</TD>

  </tr>
    <tr>
    <td>MAR</td>
    <td>$70</td>
    
    <TD COLSPAN='100%'>test3</TD>

  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
    <TD>test1</TD>
    <TD>test2</TD>
    <TD>test3</TD>
    <TD COLSPAN='100%'>test4</TD>
  </tr>
  <tr>
    <td colspan="100%">Sum: $180</td>
  </tr>
</table>
 
</body>
</html>

The td colspan attribute

<TD COLSPAN='100%'>test3</TD>
Month Savings Test Head 100%
January $100 testX testY
MAR $70
February $80 test1 test2 test3 test4
Sum: $180
#7

This is not documented in the html definition. It is likely that only the number is being seen and as long as you don’t have more than 100 columns to the right of the cell, it ‘works.’ It’s likely that any number greater than the remining number of columns, ‘works.’

#8

I assume the percent bit is important.

Sponsor our Newsletter | Privacy Policy | Terms of Service