正在尝试设置HTML/CSS表格以适应移动屏幕-不起作用

要设置HTML/CSS表格以适应移动屏幕，可以使用响应式设计的方法。响应式设计是一种能够根据设备屏幕大小和分辨率自动调整布局和样式的技术。

下面是一种常见的方法来设置适应移动屏幕的HTML/CSS表格：

使用CSS媒体查询：媒体查询是一种CSS功能，可以根据设备的特性来应用不同的样式。通过媒体查询，可以针对不同的屏幕尺寸设置不同的表格样式。

/* 默认表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
}

/* 在小屏幕上应用不同的表格样式 */
@media screen and (max-width: 600px) {
  table {
    /* 设置表格宽度为100%以适应屏幕 */
    width: 100%;
  }
  th, td {
    /* 设置表格单元格的显示方式为块级元素，使其在一行显示 */
    display: block;
  }
  th {
    /* 添加一些样式以提高可读性 */
    font-weight: bold;
  }
  td {
    /* 添加一些样式以提高可读性 */
    border-bottom: 1px solid #ddd;
  }
}

使用CSS框架：许多CSS框架（如Bootstrap、Foundation等）提供了响应式表格组件，可以轻松地创建适应移动屏幕的表格。这些框架通常具有预定义的CSS类，可以直接应用于表格元素。

<!-- 使用Bootstrap框架的响应式表格 -->
<table class="table table-responsive">
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <!-- 更多数据行 -->
  </tbody>
</table>

在这个例子中，使用了Bootstrap框架的table和table-responsive类来创建一个响应式表格。

总结一下，要设置HTML/CSS表格以适应移动屏幕，可以使用CSS媒体查询或CSS框架来实现。这样可以根据设备屏幕大小自动调整表格的布局和样式，提供更好的移动端用户体验。

腾讯云相关产品和产品介绍链接地址：