使用多个时滚动条的CSS不起作用？

Question

对于某些不可避免的原因，我有一个<table>（固定高度）和多个<tbody>标签。我需要使用css设置滚动条的样式。

使用单 <tbody>代码时，我可以这样做：

HTML ：

<table>
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>

CSS ：

thead,tbody{
    display:block
}
tbody{
    width:487px;
    height:144px;
    overflow:auto;
}
table ::-webkit-scrollbar {
    width: 12px;
    border:solid 1px #000;
    border-left-width:2px;
}
table ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background:#000;
}
table ::-webkit-scrollbar-thumb:window-inactive {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background:#000;
}

Scollbar styled (single tbody)

---

但是，使用多个 <tbody>标记时，相同的样式会失败：

HTML ：

<table>
    <tbody>
        ...
    </tbody>
    ..
    ...
    <tbody>
        ...
    </tbody>
</table>

CSS ：

table
{
    width:487px;
    height:144px;
    overflow:auto;
    display:block;
}
table ::-webkit-scrollbar {
    width: 12px;
    border:solid 1px #000;
    border-left-width:2px;
}
table ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background:#000;
}
table ::-webkit-scrollbar-thumb:window-inactive {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background:#000;
}

Scrollbar styling fails (multiple tbody)

如何解决这个问题？