.toc-filter {
    width: 100%;
}

.field--name-body img,
.field--name-body table,
.field--name-body pre {
  max-width: 100%; /* 确保它们不会超出 .field--name-body 的宽度 */
  height: auto;
}

/* themes/custom/your_theme_name/css/blog-content.css */

/* ... (前面 1-4 部分的 CSS 保持不变，特别是 .layout__region--content .field--name-body 的样式) ... */


/* ==========================================================================
   5. 表格
   ========================================================================== */

/* 表格基础样式，用于可读性和响应性 */
.field--name-body table {
  width: 100%; /* 让表格尝试填充其父容器 (.field--name-body) 的宽度 */
  max-width: 100%; /* 确保表格不会因内部内容溢出其父容器 */
  min-width: 100%; /* **新增关键样式：确保表格至少占据其父容器的全部宽度** */
  border-collapse: collapse; /* 合并表格边框 */
  margin: 2em 0;        /* 垂直间距 */

  display: block;       /* 关键：使表格表现为块级元素，以便 overflow-x 生效 */
  overflow-x: auto;     /* 关键：当内容超出时启用水平滚动 */
  -webkit-overflow-scrolling: touch; /* 改善 iOS 设备上的滚动体验 */

  /* 调整表格布局，使其内容能够自然地溢出并触发滚动条 */
  table-layout: auto; /* 默认值，但明确声明，允许列宽根据内容调整 */
}

/* 表格单元格（表头和数据单元格） */
.field--name-body th,
.field--name-body td {
  border: 1px solid #ddd; /* 浅灰色边框 */
  padding: 10px;
  text-align: left;
  vertical-align: top;
  /* **新增关键样式：强制单元格内容不换行**，从而让整个列推动表格宽度，最终触发水平滚动条 */
  white-space: nowrap;
}

/* Table header specific styles */
.field--name-body th {
  background-color: #f2f2f2; /* 表头浅色背景 */
  font-weight: bold;
  color: #555;
}

/* Zebra striping for table rows */
.field--name-body tr:nth-child(even) {
  background-color: #f9f9f9; /* 偶数行浅灰色背景 */
}

/* ... (后面 6. 响应式设计 部分的 CSS 保持不变) ... */