ということで、

http://mars.jpn.org/md_samples/md20050115.html
こちらのサンプルを丸々コピペさせていただいてJSFのDataTableタグで試してみました。



<%@ page language="java" pageEncoding="SHIFT_JIS" %>

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html>

<body onload="Tscroller('form1:yarouTable',100)">

<f:view>

    <h2>野郎ども一覧</h2>

    <h:form id="form1">

        <h:dataTable border="1" width="500" id="nameTable" var="yarou" value="#{yarouEntryBean.yarous}"  columnClasses="familyName,givenName,age">

            <h:column>

                <f:facet yarou="header">

                    <h:outputText value="氏" />

                </f:facet>

                <h:outputFormat id="familyName" value="#{yarou.familyName}" />

            </h:column>

            <h:column>

                <f:facet yarou="header">

                    <h:outputText value="名" />

                </f:facet>

                <h:outputFormat id="givenName" value="#{yarou.givenName}" />

            </h:column>

            <h:column>

                <f:facet yarou="header">

                    <h:outputText value="年齢" />

                </f:facet>

                <h:outputFormat id="age" value="#{yarou.age}" />

            </h:column>

        </h:dataTable>

    </h:form>

</f:view>

</body>

<style>

td.familyName {

    width: 200px;

}

td.givenName {

    width: 200px;

}

td.age {

    width: 80px;

    text-align: right;

}

</style>

<script>

（リンク先のTscrollerを丸々コピペ）

</script>
BackingBeanとかconfigとかは適当に想像してください。
ポイント（というほどのこともない）は、

  • formとtableにidをつけて、form1:yarouTableのように指定すること
  • 列の幅はdataTableのcolumnClassesで指定したCSSのクラスで切ること

これで完璧に縦スクロールできます。Mars様ありがとうございます。