Vue 动态生成响应式表格：优化桌面与移动端展示效果

这篇文章将讲解如何使用 Vue
实现一个动态生成的发票表格，并且通过自定义样式确保其在桌面和移动端设备上的响应式展示效果。文章重点介绍了如何利用 CSS
控制表格的外观、响应式布局的调整，以及通过媒体查询确保不同设备上的兼容性。

效果如下
web端

移动端

    <div class="invoice-table">
              <div class="table-wrapper2">
                <table class="custom-table">
                  <thead>
                    <tr>
                      <th>项目名称</th>
                      <th>规格型号</th>
                      <th>单位</th>
                      <th>数量</th>
                      <th>单价</th>
                      <th>金额</th>
                      <th>税率/征税收</th>
                      <th>税额</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(detail, idx) in item.details" :key="idx">
                      <td>{{ detail.materialDesc }}</td>
                      <td>{{ detail.specification }}</td>
                      <td>{{ detail.unit }}</td>
                      <td>{{ detail.quantity }}</td>
                      <td>{{ detail.unitPrice }}</td>
                      <td>{{ detail.netValue }}</td>
                      <td>{{ detail.taxRate }}</td>
                      <td>{{ detail.taxAmount }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

/* 针对 .invoice-table 中的 custom-table 进行样式设置 */
.invoice-table .custom-table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
  margin: 20px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  table-layout: auto; /* 自动调整列宽 */
}

.invoice-table .custom-table th,
.invoice-table .custom-table td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
  word-wrap: break-word; /* 允许文本换行 */
  word-break: break-word; /* 防止内容溢出单元格 */
}

.invoice-table .custom-table th {
  background-color: #f4f4f4;
  color: #333;
  font-weight: bold;
  font-size: 14px;
}

.invoice-table .custom-table td {
  font-size: 14px;
  color: #333;
}

.invoice-table .custom-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.invoice-table .custom-table tr:hover {
  background-color: #f1f1f1;
}

.invoice-table .custom-table td,
.invoice-table .custom-table th {
  border: 1px solid #e0e0e0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  /* 手机端的表格样式调整 */
  .invoice-table .custom-table th,
  .invoice-table .custom-table td {
    font-size: 12px; /* 调小字体 */
    padding: 8px; /* 减小单元格内边距 */
  }

  /* 在手机端设置适当的最小列宽，避免过窄 */
  .invoice-table .custom-table th:nth-child(1),
  .invoice-table .custom-table td:nth-child(1) {
    min-width: 150px; /* 项目名称列 */
  }

  .invoice-table .custom-table th:nth-child(2),
  .invoice-table .custom-table td:nth-child(2) {
    min-width: 150px; /* 规格型号列 */
  }

  .invoice-table .custom-table th:nth-child(3),
  .invoice-table .custom-table td:nth-child(3) {
    min-width: 100px; /* 单位列 */
  }

  .invoice-table .custom-table th:nth-child(4),
  .invoice-table .custom-table td:nth-child(4) {
    min-width: 100px; /* 数量列 */
  }

  .invoice-table .custom-table th:nth-child(5),
  .invoice-table .custom-table td:nth-child(5) {
    min-width: 120px; /* 单价列 */
  }

  .invoice-table .custom-table th:nth-child(6),
  .invoice-table .custom-table td:nth-child(6) {
    min-width: 120px; /* 金额列 */
  }

  .invoice-table .custom-table th:nth-child(7),
  .invoice-table .custom-table td:nth-child(7) {
    min-width: 120px; /* 税率列 */
  }

  .invoice-table .custom-table th:nth-child(8),
  .invoice-table .custom-table td:nth-child(8) {
    min-width: 120px; /* 税额列 */
  }

  /* 保证表格容器能够横向滑动 */
  .invoice-table .table-wrapper2 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* 为 iOS 提供滑动优化 */
    width: 100%;
  }

  .invoice-table .custom-table {
    table-layout: auto; /* 自动调整列宽 */
  }
}

@media (min-width: 769px) {
  /* 电脑端样式：表格宽度适应100% */
  .invoice-table .custom-table {
    width: 100%; /* 全宽显示 */
  }

  /* 电脑端表格宽度不限制 */
  .invoice-table .table-wrapper2 {
    overflow-x: visible; /* 在电脑端不需要横向滑动 */
  }
}