滚动在 HTML 表格中不起作用 [重复]

Question

我正在尝试在add scroll bar to table body 的行中执行某些操作以将滚动添加到我的表格中，但它似乎不起作用。 这是我的布局(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>

还有我的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;
}

Answer 1

您不能在表格行之间粘贴任何 DOM 元素。
尝试使用tbody：

Fiddle