For my latest project, I am faced with the challenge of creating a responsive table that transforms from 5 columns to 2 columns on smaller screens. While using complex jQuery is an option, I prefer a more semantic approach. Additionally, I need to incorporate non-table content into the design, so utilizing CSS tables seems like the best solution. Although I have been successful in converting to a single column layout, I am struggling with the conversion process between small screens and desktop devices. Despite exploring various options, I have not achieved the desired outcome yet. Unfortunately, I am unable to explore other responsive techniques due to certain restrictions. I am seeking advice from individuals who can suggest a suitable method for accomplishing this task. Please let me know if this goal is unattainable.