Scroll not working in HTML table

Question

I'm trying to do something on the lines of add scroll bar to table body to add scroll to my table, but it doesn't seem to work. Here's my layout(http://jsfiddle.net/cvvrjtdd/5/):

<div align="center">
    <table class="sampleTable">
        <tr>
            <th class="centerAlign" colspan="3">
                <b>HEADER</b>
            </th>
        </tr>
        <tr>
            <th class="centerAlign">COLUMN 1</th>
            <th class="centerAlign">COLUMN 2</th>
            <th class="centerAlign">COLUMN 3</th>
        </tr>
        <tbody class="scroll">
            <tr>
                <td class="centerAlign">
                    <a href="google.com">DATA</a>
                </td>
                <td class="centerAlign">
                    DATA
                </td>
                <td class="centerAlign">
                    DATA
                </td>
            </tr>
            <tr>
                <td class="centerAlign">
                    <a href="google.com">DATA</a>
                </td>
                <td class="centerAlign">
                    DATA
                </td>
                <td class="centerAlign">
                    DATA
                </td>
            </tr>
            <tr>
                <td class="centerAlign">
                    <a href="google.com">DATA</a>
                </td>
                <td class="centerAlign">
                    DATA
                </td>
                <td class="centerAlign">
                    DATA
                </td>
            </tr>
            <tr>
                <td class="centerAlign">
                    <a href="google.com">DATA</a>
                </td>
                <td class="centerAlign">
                    DATA
                </td>
                <td class="centerAlign">
                    DATA
                </td>
            </tr>
            <tr>
                <td class="centerAlign">
                    <a href="google.com">DATA</a>
                </td>
                <td class="centerAlign">
                    DATA
                </td>
                <td class="centerAlign">
                    DATA
                </td>
            </tr>
            <tr>
                <td class="centerAlign">
                    <a href="google.com">DATA</a>
                </td>
                <td class="centerAlign">
                    DATA
                </td>
                <td class="centerAlign">
                    DATA
                </td>
            </tr>
            <tr>
                <td class="centerAlign">
                    <a href="google.com">DATA</a>
                </td>
                <td class="centerAlign">
                    DATA
                </td>
                <td class="centerAlign">
                    DATA
                </td>
            </tr>
            <tr>
                <td class="centerAlign">
                    <a href="google.com">DATA</a>
                </td>
                <td class="centerAlign">
                    DATA
                </td>
                <td class="centerAlign">
                    DATA
                </td>
            </tr>
            <tr>
                <td class="centerAlign">
                    <a href="google.com">DATA</a>
                </td>
                <td class="centerAlign">
                    DATA
                </td>
                <td class="centerAlign">
                    DATA
                </td>
            </tr>
            <tr>
                <td class="centerAlign">
                    <a href="google.com">DATA</a>
                </td>
                <td class="centerAlign">
                    DATA
                </td>
                <td class="centerAlign">
                    DATA
                </td>
            </tr>
            <tr>
                <td class="centerAlign">
                    <a href="google.com">DATA</a>
                </td>
                <td class="centerAlign">
                    DATA
                </td>
                <td class="centerAlign">
                    DATA
                </td>
            </tr>
            <tr>
                <td class="centerAlign">
                    <a href="google.com">DATA</a>
                </td>
                <td class="centerAlign">
                    DATA
                </td>
                <td class="centerAlign">
                    DATA
                </td>
            </tr>
          </tbody>
      </table>

And my css

table.sampleTable {
  border: 0;
  width: 60%;
  height: 90%;
  display: block;
}

td.centerAlign, th.centerAlign {
  text-align: center;
}

tbody.scroll {
  overflow: scroll;
  height: 100px;
  display: block;
}

score 0 · Accepted Answer · answered Nov 23 '14 at 21:01

0

you simple can't to paste any DOM elements between the table rows.
Try to use tbody:

Fiddle

answered Nov 23 '14 at 21:01

vp_arth

14,461
4
37
66

Thanks, td.centerAlign doesn't seem to work anymore though. http://jsfiddle.net/cvvrjtdd/7/ Is it related ? – Shan Nov 23 '14 at 21:09
no, it's work. it align the text in the cells by center. Try to set column widths. – vp_arth Nov 23 '14 at 21:19

Scroll not working in HTML table

1 Answers1