在响应式显示中隐藏表头的一部分

Question

我有一个带表格标题的表格，自然就是表格单元格。

当处于响应模式时，表格标题会立即显示在每个表格单元格的上方，作为单元格标签，这是所需的显示。

我的问题是桌面模式下的表格标题上还有其他文字，这些文字也以响应模式显示。响应时，我不希望其他文本成为表格单元格标签的一部分。

我试过这个：

<th valign="top"><div class="main">Occupancy date</div><div class="secondary">(Occupancy date must be within 6 weeks.)</div></th>

使用这样的CSS：

.main {
    font-size: 14px;
}
.secondary {
    font-size: 80%;
    font-style: italic;
}
@media only screen and (min-width : 768px){
    .secondary {
        display: inline; 
    }
}
@media only screen and (max-width : 767px){
    .secondary {
        display: none; 
    }
}

我还尝试将div作为跨距和各种媒体查询，但只是无法将其他文本隐藏在移动设备上。

我不能使用Bootstrap（我更喜欢），因为我使用IBM WCM中的表单...

有人有建议吗？

移动显示屏将此显示为表格单元格标签：

<td class="input-wrapper" id="occupancy1"><h4 class="vheader">Occupancy date (Occupancy date must be within 6 weeks.): </h4>

我想我不知道这是如何组合在一起的。没有可见的代码可以更改此行为。如果可能的话，我想覆盖它。