apex:slds not work in Classic Console

Question

Please see follow codes:

<apex:page sidebar="false" standardStylesheets="true" showHeader="true" docType="html-5.0">
<apex:slds />
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
    <thead>
        <tr class="slds-line-height_reset">
            <th class="" scope="col">
                <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Account Name">Account Name</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Close Date">Close Date</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Stage">Stage</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Confidence">Confidence</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Amount">Amount</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Contact">Contact</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="slds-hint-parent">
            <th data-label="Opportunity Name" scope="row">
                <div class="slds-truncate" title="Cloudhub">
                    <a href="javascript:void(0);" tabindex="-1">Cloudhub</a>
                </div>
            </th>
            <td data-label="Account Name">
                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Prospecting">
            <div class="slds-truncate" title="Prospecting">Prospecting</div>
            </td>
            <td data-label="Confidence">
                <div class="slds-truncate" title="20%">20%</div>
            </td>
            <td data-label="Amount">
                <div class="slds-truncate" title="$25k">$25k</div>
            </td>
            <td data-label="Contact">
                <div class="slds-truncate" title="[email protected]">
                    <a href="javascript:void(0);" tabindex="-1">[email protected]</a>
                </div>
            </td>
        </tr>
        <tr class="slds-hint-parent">
            <th data-label="Opportunity Name" scope="row">
                <div class="slds-truncate" title="Cloudhub + Anypoint Connectors">
                    <a href="javascript:void(0);" tabindex="-1">Cloudhub + Anypoint Connectors</a>
                </div>
            </th>
            <td data-label="Account Name">
                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Prospecting">
                <div class="slds-truncate" title="Prospecting">Prospecting</div>
            </td>
            <td data-label="Confidence">
                <div class="slds-truncate" title="20%">20%</div>
            </td>
            <td data-label="Amount">
                <div class="slds-truncate" title="$25k">$25k</div>
            </td>
            <td data-label="Contact">
                <div class="slds-truncate" title="[email protected]">
                    <a href="javascript:void(0);" tabindex="-1">[email protected]</a>
                </div>
            </td>
        </tr>
    </tbody>
</table> 

I create a VF page with Lightning Design System, but when this page show in Classic Console all slds style lost. Please take a look picture.

I don't have any idea for this issue, does anyone know how to fixed this?

Best wishes, Lee

Answer 1

Need add <div class="slds-scope">...</div> to VF page.

Please take a look at https://www.lightningdesignsystem.com/platforms/visualforce.