SFDC：Lightning Design SystemのDataTableとrowspan表示

Lightning Design SystemでテーブルCSSを適用したい場合はDataTableのCSSを利用します。また「slds-table--col-bordered」縦線の表示も可能です。ですがrowspan表示を行うと次のように正しく表示してくれません。

この問題は「style="border-collapse: collapse;"」を宣言することで解決します。

ちなみにrowspanを宣言した場合、マウスを当てたときは次のように表示されます。

これが気になる人は「slds-no-row-hover」を宣言することでマウスオーバー時のハイライトを無効にできます。

rowspanとslds-table--col-borderedを組み合わせたときに縦線が正しく表示されず困ったときは「style="border-collapse: collapse;"」で解決できました。

サンプルコード

<apex:page showHeader="true" sidebar="false">
    <apex:slds />
    <div class="slds">
        <table class="slds-table slds-table--bordered slds-table--col-bordered slds-no-row-hover" style="border-collapse: collapse;">
            <tr>
                <th rowspan="3"></th>
                <th>
                    <apex:outputText value="{!$ObjectType.Account.Fields.Name.Label}" />
                </th>
                <th>
                    <apex:outputText value="{!$ObjectType.Account.Fields.AccountNumber.Label}" />
                </th>
                <th>
                    <apex:outputText value="{!$ObjectType.Account.Fields.Website.Label}" />
                </th>
            </tr>
            <tr>
                <td>XXX</td>
                <td>XXX</td>
                <td>XXX</td>
            </tr>
            <tr>
                <td>XXX</td>
                <td>XXX</td>
                <td>XXX</td>
            </tr>
        </table>
    </div>
</apex:page>