html - 设备屏幕宽度减小时表头消失

Question

我试图以表格形式显示一些值。像下面这就是它在桌面上的样子

当我试图减小屏幕的宽度时，表格标题正在消失并变成如下所示的表格标题

下面的屏幕截图显示由于一些 css 问题成为标题。

知道css的哪一部分出错了

桌子

<template>
    <lightning-card variant="narrow" icon-name="standard:lead">
        <template if:true={accdata}>
            <table class="slds-table slds-table_header-fixed slds-table_resizable-cols slds-table_fixed-layout">
                <thead>
                    <tr>
                        <template for:each={columns} for:item="col">
                            <th key={col.label} class="slds-is-resizable dv-dynamic-width" scope="col"
                                title={col.label}>
                                <span class="slds-truncate">{col.label}</span>
                            </th>
                        </template>
                    </tr>
                </thead>
                <tbody>
                    <template for:each={accdata} for:item="row" for:index="index">
                        <tr key={row.id} class="slds-m-top_xx-small">
                            <td data-column={row.Name}>
                                {row.Name}
                            </td>
                            <td data-column={row.Shipping_Address__c}>
                                {row.Shipping_Address__c}
                            </td>
                            <td data-column={row.Industry}>
                                {row.Industry}
                            </td>
                            <td data-column={row.Phone}>
                                {row.Phone}
                            </td>
                            <td data-column={row.Phone}>
                                {row.Phone}
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </template>
    </lightning-card>
</template>

CSS -

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    table { 
        width: 100%; 
    }

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
    
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr { border: 2px solid rgb(176 173 171); }
    
    td { 
        /* Behave  like a "row" */
        border: none;
        /*border-bottom: 1px solid #eee; */
        position: relative;
        padding-left: 30%; 
    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        /* Label the data */
        content: attr(data-column);
        border-color: darkgrey !important;
        color: #000;
        font-weight: bold;
    }

}
  [1]: https://i.stack.imgur.com/mWYyT.png
  [2]: https://i.stack.imgur.com/SXZng.png

标签： htmlcssresponsive-designsalesforce-lightning