HTMLScrollBar

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Table</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Add icon library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/TableStyle.css">
</head>
<body>
<div>
    <table id=table  class="fixed_header">
                <caption>Design and Front-End Development Books</caption>
                <thead>
                    <tr>
                        <th scope="col" colspan="1">Item</th>
                        <th scope="col">Availability</th>
                        <th scope="col">Qty</th>
                        <th scope="col">Price</th>
                        <th scope="col">Edit</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td id="book-title1">
                            <strong class="book-title" >Don&#8217;t Make Me Think</strong>
                            <span class="text-offset">by Steve Krug</span>
                        </td>
                        <td class="item-stock">In Stock</td>
                        <td class="item-qty">1</td>
                        <td class="item-price">$30.02</td>
                        <td><button name='btnEdit' class='btnEdits' style="vertical-align:middle" onclick="btn1Call(event,'book-title1');"><span>Edit </span></button></td>
                    </tr>
                    <tr>
                        <td id="book-title2">
                            <strong class="book-title" >A Project Guide to UX Design</strong>
                            <span class="text-offset">by Russ Unger &#38; Carolyn Chandler</span>
                        </td>
                        <td class="item-stock">In Stock</td>
                        <td class="item-qty">2</td>
                        <td class="item-price">$52.94 <span class="text-offset item-multiple">$26.47 &#215; 2</span></td>
                        <td><button name='btnEdit' class='btnEdits' style="vertical-align:middle" onclick="btn1Call(event,'book-title2');"><span>Edit </span></button></td>
                    </tr>
                    <tr>
                        <td id="book-title3">
                            <strong class="book-title">Introducing HTML5</strong>
                            <span class="text-offset">by Bruce Lawson &#38; Remy Sharp</span>
                        </td>
                        <td class="item-stock">Out of Stock</td>
                        <td class="item-qty">1</td>
                        <td class="item-price">$22.23</td>
                        <td><button name='btnEdit' class='btnEdits' style="vertical-align:middle" onclick="btn1Call(event,'book-title3');"><span>Edit </span></button></td>
                    </tr>
                    <tr>
                        <td id="book-title4">
                            <strong class="book-title" >Bulletproof Web Design</strong>
                            <span class="text-offset">by Dan Cederholm</span>
                        </td>
                        <td class="item-stock">In Stock</td>
                        <td class="item-qty">1</td>
                        <td class="item-price">$30.17</td>
                        <td><button name='btnEdit' class='btnEdits' style="vertical-align:middle" onclick="btn1Call(event,'book-title4');"><span>Edit </span></button></td>
                    </tr>
                </tbody>
    </table>
</div>
    <script language="Javascript">

        function btn1Call(evt, t) {
            var e = document.getElementById(t);
            alert(e.innerText);
        }


    </script>
</body>
</html>