如何在响应式表格中获得文本左对齐的全宽列

Posted 2023-03-05

【中文标题】如何在响应式表格中获得文本左对齐的全宽列

【英文标题】：How to get a full-width column with text aligned left in a responsive table

【发布时间】：2021-10-22 07:14:48

【问题描述】：

我正在尝试制作一个可堆叠的响应式表格，并且我需要一些行是全宽的（表格中的标题）。在移动视图中，我无法让文本左对齐。任何建议表示赞赏！

使用下面的代码，副标题 1 的行将在移动设备中显示两次数据标题。在副标题 2 的行中，data-title 为空白，它将显示在 mobile 的第二列中。我需要它弹出到移动设备的第一列，或者以某种方式变成全角。

@media only screen and (max-width: 800px) 
  /* Force table to not be like tables anymore */
  #no-more-tables table,
  #no-more-tables thead,
  #no-more-tables tbody,
  #no-more-tables th,
  #no-more-tables td,
  #no-more-tables tr 
    display: block;
  
  /* Hide table headers (but not display: none;, for accessibility) */
  #no-more-tables thead tr 
    position: absolute;
    top: -9999px;
    left: -9999px;
  
  #no-more-tables tr 
    border: 1px solid #ccc;
  
  #no-more-tables td 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: left;
  
  #no-more-tables td:before 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
  
  /*
    Label the data
    */
  #no-more-tables td:before 
    content: attr(data-title);
  

<section id="no-more-tables">

  <table border="1" cellpadding="10" cellspacing="0" class="table-bordered table-striped table-condensed cf">
    <thead class="cf">

      <tr>
        <th  style="text-align: left;"><strong>Column 1</strong></th>
        <th  style="text-align: left;"><strong>Column 2</strong></th>
        <th  class="numeric" style="text-align: left;"><strong>Column 3</strong></th>
        <th  class="numeric" style="text-align: left;"><strong>Column 4</strong></th>
        <th  class="numeric" style="text-align: left;"><strong>Column 5</strong></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="5" data-title="Subheading 1"><strong>Subheading 1</strong></td>
      </tr>
      <tr>
        <td data-title="Column 1">Lorem ipsum </td>
        <td data-title="Column 2">Dolor sit </td>
        <td class="numeric" data-title="Column 3">Amet, consectetur </td>
        <td class="numeric" data-title="Column 4">Adipiscing </td>
        <td class="numeric" data-title="Column 5">Elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td>
      </tr>
      <tr>
        <td colspan="5" data-title=""><strong>Subheading 2</strong></td>
      </tr>
    </tbody>
  </table>
</section>

【参考方案1】：

在标记中，我将子标题包裹在 span 中，并给它们一个 subheading 类。在样式中，我为该类添加了以下规则：visibility:hidden。

这是我的堆栈闪电战：https://stackblitz.com/edit/web-platform-tcsfnz?file=index.html

@media only screen and (max-width: 800px) 
  /* Force table to not be like tables anymore */
  #no-more-tables table,
  #no-more-tables thead,
  #no-more-tables tbody,
  #no-more-tables th,
  #no-more-tables td,
  #no-more-tables tr 
    display: block;
  
  /* Hide table headers (but not display: none;, for accessibility) */
  #no-more-tables thead tr 
    position: absolute;
    top: -9999px;
    left: -9999px;
  
  #no-more-tables tr 
    border: 1px solid #ccc;
  
  #no-more-tables td 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: left;
  
  #no-more-tables td:before 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
  
  /*
    Label the data
    */
  #no-more-tables td:before 
    content: attr(data-title);
  
  #no-more-tables td .subheading 
    visibility: hidden;
    font-weight: 600;
  


#no-more-tables td .subheading 
  font-weight: 600;

<section id="no-more-tables">
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
        class="table-bordered table-striped table-condensed cf"
      >
        <thead class="cf">
          <tr>
            <th  style="text-align: left">
              <strong>Column 1</strong>
            </th>
            <th  style="text-align: left">
              <strong>Column 2</strong>
            </th>
            <th  class="numeric" style="text-align: left">
              <strong>Column 3</strong>
            </th>
            <th  class="numeric" style="text-align: left">
              <strong>Column 4</strong>
            </th>
            <th  class="numeric" style="text-align: left">
              <strong>Column 5</strong>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colspan="5" data-title="Subheading 1">
              <span class="subheading">Subheading 1</span>
            </td>
          </tr>
          <tr>
            <td data-title="Column 1">Lorem ipsum</td>
            <td data-title="Column 2">Dolor sit</td>
            <td class="numeric" data-title="Column 3">Amet, consectetur</td>
            <td class="numeric" data-title="Column 4">Adipiscing</td>
            <td class="numeric" data-title="Column 5">
              Elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
              laboris nisi ut aliquip ex ea commodo consequat.
            </td>
          </tr>
          <tr>
            <td colspan="5" data-title="Subheading 2">
              <span class="subheading">Subheading 2</span>
            </td>
          </tr>
        </tbody>
      </table>
    </section>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。