我正在使用wp list table,没有(php)类,但只使用html,我想与大家分享我的研究成果。如果您在自己构建wp列表表时需要一个响应表,那么需要注意以下事项:
添加类column-primary
至页眉th
和车身td
. 如果缺少此类,则移动视图中的表会变得凌乱toggle-row
分类为column-primary
要展开行,请添加data-colname
至车身td
- 手机中的内容显示在在中间。没有data-colname
标签丢失(通常显示在表格标题中)/ul>
最终HTML代码应如下所示:
<table class="wp-list-table widefat striped">
<thead>
<tr>
<th class="column-primary">primary Field Name</th>
<th>Label 2</th>
<th>Label 3</th>
</tr>
</thead>
<tbody>
<tr class="is-expanded">
<td class="column-primary" data-colname="Name">primary field content
<button type="button" class="toggle-row">
<span class="screen-reader-text">show details</span>
</button>
</td>
<td data-colname="Label 2">Content 2</td>
<td data-colname="Label 3">Content 3</td>
</tr>
<tr>
<td class="column-primary" data-colname="Name">unexpanded row
<button type="button" class="toggle-row">
<span class="screen-reader-text">show details</span>
</button>
</td>
<td data-colname="Label 2">Content 2</td>
<td data-colname="Label 3">Content 3</td>
</tr>
</tbody>
</table>