@media，在数据标签顶部写入数据

Question

我正在尝试使用CSS @media为较小的屏幕创建响应数据表。 我的代码可以正常工作，因为表可以重新格式化，但是数据覆盖了数据标签。

CSS File:

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

table, thead, tbody, th, td, tr { 
    display: block; 
}
thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}

tr { border: 1px solid #ccc; }

td { 
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
}

td:before { 
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

td:nth-of-type(1):before { content: "Name"; }
td:nth-of-type(2):before { content: "Phone"; }
td:nth-of-type(3):before { content: "EMail"; }

}

任何建议都会很棒。 汽车