WordPress插入表格，让表格自适应

1、在WordPress编辑器中插入一个表格，点击“插入”菜单，然后选择“表格”，设置行数和列数。

2、接下来，为表格添加一个类名，responsivetable”，这将帮助我们在CSS中应用样式。

3、在WordPress主题的样式文件（通常是style.css）中，添加以下CSS样式：

/* 定义表格的基本样式 */.responsivetable {  width: 100%;  bordercollapse: collapse;}/* 定义表格的单元格样式 */.responsivetable th,.responsivetable td {  border: 1px solid #ccc;  padding: 8px;  textalign: left;}/* 定义表格的小标题样式 */.responsivetable th {  backgroundcolor: #f2f2f2;  fontweight: bold;}

4、现在，我们需要使用媒体查询来调整表格在不同屏幕尺寸下的显示效果，在样式文件中添加以下代码：

@media screen and (maxwidth: 768px) {  /* 当屏幕宽度小于等于768px时，隐藏表格的表头 */  .responsivetable thead {    display: none;  }  /* 当屏幕宽度小于等于768px时，将表格的单元格内容堆叠在一起 */  .responsivetable tr {    display: block;    marginbottom: 1em;  }  /* 当屏幕宽度小于等于768px时，将表格的单元格内容设置为块级元素 */  .responsivetable td,  .responsivetable th {    display: block;    textalign: right;  }}

5、现在，保存并刷新WordPress网站，你应该可以看到表格已经实现了自适应效果，在较小的屏幕上，表头将被隐藏，单元格内容将堆叠在一起并设置为右对齐。