Listenhintergrund mit overflow-x

Hallo, ich sitze hier seit einigen Tagen mit einem Problem. Vielleicht könnt ihr mir ja helfen. Ich möchte im aside eine Menüliste ausgeben. Wird der Text zu lang, soll der überstehende Teil des Textes versteckt werden. Mit der Scrollbar kann ich mir den versteckten Text dennoch anschauen. bild

Der hier verwendete Code

<html lang="de"> <head> <title>Test</title> <style> aside { width: 15rem; overflow-x: scroll; } table { display: table-row; white-space: nowrap; } tr:nth-child(odd) td{ background-color: rgb(0, 255, 0); } tr:nth-child(even) td{ background-color: rgb(255, 0, 0); } </style> </head> <body> <aside> <table> <tr><td>Menuepunkt 1</td></tr> <tr><td>Menuepunkt 2</td></tr> <tr><td style="padding-left:20px">Menuepunkt 3 mit mehr Text fuer den overflow</td></tr> <tr><td>Menuepunkt 4</td></tr> </table> </aside> </body> </html>