basti1012.bplaced.net

Übersicht >> Listenhintergrund mit overflow-x
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.

Listenhintergrund mit overflow-x

2021-10-07 02:38:12
    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. <img class="vorschau" src="image/listenhintergrund.png" alt="bild">

    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>