Search code examples
htmlcssuser-experience

Design table with dependent columns

enter image description here

I have some data to display in as in the image above. Student Names column each line is dependent on Student Results column.

In a scenario where the cell's width is small is fit the one line text it will occupy the next line and dependent column line mapping is lost.

Question:

  1. Is there any UX guideline/recommendation for display this type of information.
Solution

  • You are trying to create a table with multiple keys and values in one line. Try to assign every tuple to an own line in the table. Then style your table by assigning borders where you want them. That way, your lines will stay matched.