How can I add a scroll bar to the table contents?-CodePudding

Need help getting a scroll wheel to control the overflow created form ejs. it currently makes a scroll wheel on the rigth but when i scroll it moves everything. i only wanna be able to scroll though the different table bodys not the page. Thanks, explination and code is awesome :P

It says i need to add more details to create the question but I dont have any more details to add. Does this count as a detail? Lets find out.

.pokedex{
    background: rgba(7, 107, 238, 0.15);
    border: rgb(0, 0, 0);
    border-width: 2px;
    border-style: solid;
}

<table >
<%pokedex.forEach(pokemon=> {%>
<tbody >
    <!-- Pokemon Name and Image -->
    <tr>
        <td colspan="2">
            <div ><strong>
                    <h4><b>
                            <%=pokemon.name%>
                    </h4></b>
                </strong></div>
        </td>
    </tr>
    <tr>
        <td colspan="2" src=<%=pokemon.src.img%>>
            <img src=<%=pokemon.src.img%> alt="pokemon_img" id=<%=pokemon.dex%> width="150" height="150"  onclick="buddySelect(this.id)">
        </td>
    </tr>
    <!-- STATS -->
    <tr>
        <td><b>Type: </b></td>
        <td id="types"><b>
                <%=pokemon.type%>
            </b></td>
    </tr>
    <tr>
        <td><b>Height: </b></td>
        <td id="height"><b>[HEIGHT]</b></td>
    </tr>
    <tr>
        <td><b>Weight: </b></td>
        <td id="weight"><b>[WEIGHT]</b></td>
    </tr>
    <tr>
        <td><b>Abilities: </b></td>
        <td id="abilities"><b>[ABILITIES]</b></td>
    </tr>
    <tr>
        <td><b>HP</b></td>
        <td id="hp"><b>
                <%=pokemon.stats[0]%>
            </b></td>
    </tr>
    <tr>
        <td><b>Attack</b></td>
        <td id="attack"><b>
                <%=pokemon.stats[1]%>
            </b></td>
    </tr>
    <tr>
        <td><b>Defence</b></td>
        <td id="defence"><b>
                <%=pokemon.stats[2]%>
            </b></td>
    </tr>
    <tr>
        <td><b>Special Attack</b></td>
        <td id="attackS"><b>
                <%=pokemon.stats[3]%>
            </b></td>
    </tr>
    <tr>
        <td><b>Special Defence</b></td>
        <td id="defenceS"><b>
                <%=pokemon.stats[4]%>
            </b></td>
    </tr>
    <tr>
        <td><b>Speed</b></td>
        <td id="speed"><b>
                <%=pokemon.stats[5]%>
            </b></td>
    </tr>
    <tr>
        <td><b>Total</b></td>
        <td id="total"><b>
                <%=pokemon.stats.reduce(function(a, b) { return a   b; }, 0)%>
            </b></td>
    </tr>
</tbody>
<%});%>
</table>

CodePudding user response：

.pokedex{
    background: rgba(7, 107, 238, 0.15);
    border: rgb(0, 0, 0);
    border-width: 2px;
    border-style: solid;
    overflow-y:scroll;
}

CodePudding user response：

I don't know if this is what you need. I create a simple example that allows to you scrolling the table, instead the full page. If this is not what you need, please come back with some parctic example and I will try to check it out.

.pokedex-wrapper {
      position: relative;
      height: 150px;
      border: 2px solid rgb(0, 0, 0);
      overflow: hidden;
      overflow-y: scroll;
 }
    
 .pokedex {
   width: 100%;
   background: rgba(7, 107, 238, 0.15);
 }

<div >
    <table >
        POKEDEX (FOR EACH)
        <tbody >
            <!-- Pokemon Name and Image -->
            <tr>
                <td colspan="2">
                    <div >
                        <h4>POKEMON NAME</h4>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <img src="" id="<%=pokemon.dex%>" width="150" height="150"  onclick="buddySelect(this.id)">
                </td>
            </tr>
            <!-- STATS -->
            <tr>
                <td><b>Type: </b></td>
                <td id="types"><b>
                        POKEMON TYPE
                    </b></td>
            </tr>
            <tr>
                <td><b>Height: </b></td>
                <td id="height"><b>[HEIGHT]</b></td>
            </tr>
            <tr>
                <td><b>Weight: </b></td>
                <td id="weight"><b>[WEIGHT]</b></td>
            </tr>
            <tr>
                <td><b>Abilities: </b></td>
                <td id="abilities"><b>[ABILITIES]</b></td>
            </tr>
            <tr>
                <td><b>HP</b></td>
                <td id="hp"><b>
                        POKEMON STATS
                    </b></td>
            </tr>
            <tr>
                <td><b>Attack</b></td>
                <td id="attack"><b>
                       POKEMON STATS[1]
                    </b></td>
            </tr>
            <tr>
                <td><b>Defence</b></td>
                <td id="defence"><b>
                        POKEMON STATS[2]
                    </b></td>
            </tr>
            <tr>
                <td><b>Special Attack</b></td>
                <td id="attackS"><b>
                        POKEMON STATS[3]
                    </b></td>
            </tr>
            <tr>
                <td><b>Special Defence</b></td>
                <td id="defenceS"><b>
                        POKEMON STATS[4]
                    </b></td>
            </tr>
            <tr>
                <td><b>Speed</b></td>
                <td id="speed"><b>
                        POKEMON STATS[5]
                    </b></td>
            </tr>
            <tr>
                <td><b>Total</b></td>
                <td id="total"><b>
                        [POKEMON REDUCE FUNCTION]
                    </b></td>
            </tr>
        </tbody>
        </table>
    </div>