滚动无法在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