newechoes/src/styles/articles-table.css

/* 表格基础样式 */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.95rem;
    box-shadow: 0 4px 10px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    border-radius: 0.5rem;
  }
  
  /* 表格边框样式 */
  table, th, td {
    border: 1px solid #e2e8f0;
  }
  
  /* 表头样式 */
  thead {
    background-color: #f0f5ff;
  }
  
  th {
    padding: 1rem;
    font-weight: 600;
    text-align: left;
    vertical-align: middle;
    border-bottom: 2px solid #d6e0ff;
    color: #3451db;
  }
  
  /* 表格单元格样式 */
  td {
    padding: 0.875rem 1rem;
    vertical-align: middle;
    color: #1e293b;
    position: relative;
  }
  
  /* 内容对齐方式 */
  th[align="center"],
  td[align="center"] {
    text-align: center;
  }
  
  th[align="right"],
  td[align="right"] {
    text-align: right;
  }
  
  th[align="left"],
  td[align="left"] {
    text-align: left;
  }
  
  /* 表格行交替颜色 */
  tbody tr:nth-child(even) {
    background-color: #f8fafc;
  }
  
  tbody tr:nth-child(odd) {
    background-color: #ffffff;
  }
  
  /* 鼠标悬停效果 */
  tbody tr:hover {
    background-color: #f5f7ff;
  }
  
  /* 特定表格类型样式 */
  table.feature-comparison td,
  .feature-table td,
  .function-table td,
  .comparison-table td {
    text-align: center;
  }
  
  table.feature-comparison td:first-child,
  .feature-table td:first-child,
  .function-table td:first-child,
  .comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
  }
  
  .feature-table th,
  .function-table th,
  .comparison-table th {
    text-align: center;
  }
  
  .feature-table th:first-child,
  .function-table th:first-child,
  .comparison-table th:first-child {
    text-align: left;
  }
  
  /* 勾号和叉号样式 */
  .tick, .yes, .true, .check-mark, .checkmark, .check, .✓ {
    display: inline-block;
    text-align: center;
    color: #059669;
    font-weight: bold;
    font-size: 1.25em;
  }
  
  .cross, .no, .false, .cross-mark, .crossmark, .cross-symbol, .✗ {
    display: inline-block;
    text-align: center;
    color: #dc2626;
    font-weight: bold;
    font-size: 1.25em;
  }
  
  /* 添加内容 */
  .tick::before, .yes::before, .true::before {
    content: "✓";
  }
  
  .cross::before, .no::before, .false::before {
    content: "✗";
  }
  
  /* 状态标识符号样式 */
  td:has(> :is(svg[aria-label="yes"], .yes, .tick, .true)) {
    color: #047857;
  }
  
  td:has(> :is(svg[aria-label="no"], .no, .cross, .false)) {
    color: #b91c1c;
  }
  
  /* 单个单元格居中 */
  td:only-child {
    text-align: center;
  }
  
  /* 全局状态颜色 */
  .text-success, 
  .text-green,
  .success-mark {
    color: #059669 !important;
    font-weight: bold;
  }
  
  .text-danger,
  .text-red,
  .danger-mark {
    color: #dc2626 !important;
    font-weight: bold;
  }
  
  /* Prose 内表格样式 */
  .prose table {
    border-collapse: collapse !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
  }
  
  .prose table th,
  .prose table td {
    border: 1px solid #e2e8f0 !important;
  }
  
  /* 表格内行内样式覆盖 */
  table[style] th,
  table[style] td {
    border: 1px solid #e2e8f0 !important;
  }
  
  table[style] td {
    vertical-align: middle;
  }
  
  /* 响应式表格样式 */
  @media (max-width: 640px) {
    /* 表格容器 */
    table {
      display: table;
      table-layout: fixed;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    
    /* 表格包装容器 - 注意：需要在HTML中添加div.table-wrapper包围表格 */
    .table-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
      margin: 1.5em 0;
    }
    
    /* 确保标题和内容宽度一致 */
    table th,
    table td {
      min-width: 8rem;
      padding: 0.75rem;
      white-space: nowrap;
    }
  }
  
  /* 暗色模式 */
  [data-theme="dark"] table {
    box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.3), 0 2px 6px -1px rgba(0, 0, 0, 0.2);
    border-color: #475569;
    background-color: #0f172a;
    border-radius: 0.5rem;
    overflow: hidden;
  }
  
  [data-theme="dark"] table, 
  [data-theme="dark"] th, 
  [data-theme="dark"] td {
    border-color: #475569;
  }
  
  [data-theme="dark"] table[style] th,
  [data-theme="dark"] table[style] td,
  [data-theme="dark"] .prose table th,
  [data-theme="dark"] .prose table td {
    border-color: #475569 !important;
  }
  
  [data-theme="dark"] thead {
    background-color: #1e293b;
    border-bottom: 2px solid #4b6bff;
  }
  
  [data-theme="dark"] th {
    border-bottom-color: #4b6bff;
    color: #adc2ff;
    background-color: transparent;
    font-weight: 600;
    letter-spacing: 0.5px;
  }
  
  [data-theme="dark"] th:not(:last-child) {
    border-right-color: #374151;
  }
  
  [data-theme="dark"] td {
    color: #e2e8f0;
  }
  
  [data-theme="dark"] td:not(:last-child) {
    border-right-color: #374151;
  }
  
  [data-theme="dark"] tbody tr:nth-child(even) {
    background-color: #1e293b;
  }
  
  [data-theme="dark"] tbody tr:nth-child(odd) {
    background-color: #111827;
  }
  
  [data-theme="dark"] tbody tr:hover {
    background-color: #272f45;
    box-shadow: inset 0 0 0 2px rgba(75, 107, 255, 0.3);
  }
  
  [data-theme="dark"] tbody tr:last-child td {
    border-bottom: none;
  }
  
  /* 暗色模式下的勾叉符号 */
  [data-theme="dark"] .tick, 
  [data-theme="dark"] .yes, 
  [data-theme="dark"] .true, 
  [data-theme="dark"] .check-mark,
  [data-theme="dark"] .checkmark, 
  [data-theme="dark"] .check, 
  [data-theme="dark"] .✓,
  [data-theme="dark"] .text-success, 
  [data-theme="dark"] .text-green,
  [data-theme="dark"] .success-mark {
    color: #10b981 !important;
    text-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
  }
  
  [data-theme="dark"] .cross, 
  [data-theme="dark"] .no, 
  [data-theme="dark"] .false, 
  [data-theme="dark"] .cross-mark,
  [data-theme="dark"] .crossmark, 
  [data-theme="dark"] .cross-symbol, 
  [data-theme="dark"] .✗,
  [data-theme="dark"] .text-danger,
  [data-theme="dark"] .text-red,
  [data-theme="dark"] .danger-mark {
    color: #ef4444 !important;
    text-shadow: 0 0 5px rgba(239, 68, 68, 0.3);
  }