Add horizontal line to a Matrix Table | XM Community
Skip to main content
Solved

Add horizontal line to a Matrix Table

  • August 3, 2022
  • 6 replies
  • 828 views

Forum|alt.badge.img+8

Hi All,
I am attempting to add a horizontal line between Severe and Not Applicable on this Matrix table. However, I don't know the code for a horizontal line here:
image.pngimage.png

Best answer by Tom_1842

Hi there, the below CSS should work for to add a divider line to the last row of a Matrix table:

<style>

.Matrix table{border-collapse:collapse !important;}

tr.ChoiceRow.bottom{border-top: 2px solid black;}

</style>

6 replies

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Level 8 ●●●●●●●●
  • 909 replies
  • Answer
  • August 3, 2022

Hi there, the below CSS should work for to add a divider line to the last row of a Matrix table:

<style>

.Matrix table{border-collapse:collapse !important;}

tr.ChoiceRow.bottom{border-top: 2px solid black;}

</style>


Forum|alt.badge.img+8
  • Author
  • Level 2 ●●
  • 43 replies
  • August 4, 2022

Thank you!


Forum|alt.badge.img+1
  • 5 replies
  • February 1, 2023

Tom_1842 do you maybe know how to add this horizontal line to a specific row in a matrix question?
For example, a matrix q with 4 rows and 3 columns, and I want to add it only after the 2nd row.

Many thanks.


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Level 8 ●●●●●●●●
  • 909 replies
  • February 1, 2023

Hi dmus you can approach this by using the Rich Content Editor's HTML/Source view "<>" to update your Question Text with the below:

<style type="text/css"> @media (min-width: 481px){.Matrix table{border-collapse:collapse !important;} tbody > tr:nth-child(2){border-bottom: 2px solid black;} } </style>


Forum|alt.badge.img
  • 1 reply
  • October 30, 2023

I am not seeing the CSS code for these.  Does anyone know why they no longer appear?


JoseS
Administrator
Forum|alt.badge.img+20
  • Administrator
  • 449 replies
  • November 1, 2023

Hello @mrmoskowitz, thanks for bringing this to our attention! You should now be able to see the CSS code for both responses. 🙂