Does this mean the two rows can't be joined?
Is the alternative to adding height to the first row?
If so, row 1 would be 70px high.
How can I make all rows from row 2 onwards 35px high?
I have probably figured it out, will report back tomorrow.
1 Like
You can learn about colspan and rowspan here:
https://www.computerhope.com/issues/ch001655.htm
One quirk, if, in your example above, you have three columns and 6 rows, and you want to span the three columns and two rows, you will find the rows collapse into one row (because there are no other columns to the right with cells in to support the structure).
For your example, the approach I have taken above to set the height of the top cell is the best way. If, as I expect, you have many more columns to the right of the three you want to span, then you can do this:
WITHOUT colspan or rowspan
WITH colspan and rowspan
Titulo,a,b\n
d,e\n
8,12,5,x,y\n
13,19,7,x,y\n
20,22,3,x,y\n
23,29,7,x,y
You need to look carefully at the data you provide for the six cells you want to combine!
Here is a visual example using html/css
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<title>Demo</title>
<style>
table,td {
border: 1px solid black;
}
table {
width:50%;
margin: auto;
}
td {
height:50px;
text-align: center;
}
</style>
</head>
<body>
<br><br><br>
<table>
<tr>
<td colspan="3" rowspan="2" style="background-color:powderblue">Titulo</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>8</td>
<td>12</td>
<td>5</td>
<td>x</td>
<td>y</td>
</tr>
<tr>
<td>13</td>
<td>19</td>
<td>7</td>
<td>x</td>
<td>y</td>
</tr>
</table>
</body>
</html>
Titulo,a\n d\n 8,12,5,x\n 13,19,7,x\n 20,22,3,x\n 23,29,7,x
Do I need an additional column on the right for this method?
I don't need that column.
I'm trying to change the data, but I can't.
Titulo\n \n 8,12,5\n 13,19,7\n 20,22,3\n 23,29,7
The intention was for all rows to have the same height, and for rows 1 and 2 to be combined so it would look aligned with another parallel table.
I believe I covered everything on *span above.
Adjust colspan and rowspan accordingly
Taifun
Now I understand that it's necessary to put text in the cell because:
if there's no text, the height is reduced. This is what happens in this example where I have two tables and I want them to be aligned.
My question is, how do I give a specific height to all the rows?
(Not to the table)
You will have to give the table a fixed layout, as I previously showed, then set the cell heights for all the th and td elements of the table.
You never responded to this query:
Yes, I did it, and what I noticed is that the lengths had to be a multiple of the total; in that case, I had 171 fixed columns.
But I also noticed that the rows increased downwards, so I decided to change the method since I don't know how many rows there will be—that would vary depending on the programming.
Therefore, I need to stabilize the width of all the rows in both Table 1 and Table 2 so that they are aligned.
This js will span the three columns and set the height to double the default row height:
document.querySelector("#r1c1").colSpan=3;
document.querySelector("#r1c1").style.height=
(document.getElementById('table1')
.rows[0].offsetHeight*2) + "px";
You will need to remove the Inicio/Fin/Horas row.However, if you set the "Titulo" cell value to:
Titulo<br>Inicio Fin Horas\n
this can allow for these headings also. Here I set the containing vertical arrangement width to 50%:
You may need to adjust margin,padding,font size,line-height to maintain your cell height.
I don't think I've explained myself clearly. I need all the rows to have the same height.
In this example you sent, it only gives me the height for the first row, which isn't what I need.
As you can see, I need to use a zero (0) to align the two tables, and I don't want any text in the cells.
That's why the rows need to have the same height.
Simplest solution, make the font colour white in those cells with the 0 ?
More complicated, set the tables to fixed layout, set the cells to @ 30px height, set the table widths to whatever they need to be.
Perfect.
Lastly, how can I count line breaks (\n) in a text?
I need this to determine the number of rows in the table.
It will also allow me to create an additional row by adding 1.
Titulo\nInicio,Fin,Horas\n11,15,5\n16,22,7\n23,25,3\n26,32,7
¿count?
1 Like
In advance of what I am guessing is coming next:
Added two more tableviewer instances for the header rows, which can remain static.
The other two tableviewer instances display the data.
WhenScrolled events set to scroll both data tableviewers vertically with each other. Have not yet handled the horizontal scrolls for the right hand tableviewers.
Empty cell width set with min-width @ 9px, this needs work for the larger numbers
