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?
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
Thanks for the advice.
Vertical alignment between head2 and body2 is also necessary.
On the other hand, horizontal alignment between body1 and body2 is also needed.
(It's not perfectly aligned.)
Watch the video.
Is there a way for the two tables A and B to move horizontally at the same time so that they are aligned?
No matter how hard I try, it doesn't work.
It would be useless to me if I returned with 2 tables because the header would be hidden.
Looks like you will need to go back to a single table and use css to make the top two rows sticky. Then see if you can remove any padding or margin from the other two tables so that they align with the table on the right (or if not possible do the same on the left).
What if I add two buttons (left and right) that scroll both tables horizontally at the same time?
Of course, this would disable touch scrolling; it would only work with the buttons.
Is this possible?
Run out of time tonight, but will have another look tomorrow.
Try this:
tvFixedColumnsAndScroll.aia (28.2 KB)
CSS in StyleSheet
td { white-space: nowrap; height: 30px; min-width:30px }
td:first-child{ position: sticky; width:50px; left: 0; z-index: 10; background: white; }
td:nth-child(2){ position: sticky; width:50px; left: 50px; z-index: 10; background: white; }
td:nth-child(3){ position: sticky; width:50px; left: 100px; z-index: 10; background: white; }
tr:first-child { position: sticky; top: 0; z-index: 11; background: powderblue; }
tr:nth-child(2) { position: sticky; top: 30px; z-index: 11; background: powderblue; }
tr:first-child td:first-child,tr:nth-child(2) td:first-child,
tr:first-child td:nth-child(2), tr:nth-child(2) td:nth-child(2),
tr:first-child td:nth-child(3), tr:nth-child(2) td:nth-child(3) { background: powderblue; min-width: 50px; }
tr:first-child td:first-child { border-right: powderblue; }
tr:first-child td:nth-child(2) { border-left: powderblue; border-right: powderblue; }
tr:first-child td:nth-child(3) { border-left: powderblue; }
I've been analyzing the blocks, and it seems to be the most suitable, though I have some doubts, but we're good.
I wanted to ask how I could assign lengths to the columns, for example:
A: Total length of the first 3 columns in pixels
B: Total length of the remaining columns. Since it's extensive with 168 columns, I need to give it a total of 3696 pixels so that each column has 22 pixels.
C: Length of the first column in pixels
In the case of zone A, it's understood that each column should have a measurement and that the sum of the 3 columns will give us the total length.
This will prevent the fixed zone A from shifting, which is why I need to assign dimensions to each of those 3 columns.
P.S.
The table consists of 171 columns in total.
It is all in the css stylesheet I posted above. You can specify widths for individual columns if you wish.
What I understand is that it's only assigned.
(minimum width) to the entire table.
It depends a lot on the length of the text; look at this example in the first column.
What would happen if it's no longer a number but long text?
The first column disappears in the fixed area.
Even though I deleted (Tilulo) because it wouldn't be centered anymore, it's tolerable without text.
td:first-child{ position: sticky; width:50px; left: 0; z-index: 10; background: white; }
td:nth-child(2){ position: sticky; width:50px; left: 50px; z-index: 10; background: white; }
td:nth-child(3){ position: sticky; width:50px; left: 100px; z-index: 10; background: white; }
(z-index) What does it mean?
I provided my "solution" based upon the requirements you provided. If you intend to do something completely different, then you will need to research html/css and possibly javascript, in order to do what you want...
The z-index places those cells either above or below other cells, this helps with the fixed columns and rows.
