如何在响应式 table 中获得文本左对齐的 full-width 列

Question

我正在尝试制作一个可堆叠的响应式 table，我需要一些行是 full-width（headers 在 table 中）。在移动视图中时，我无法让文本左对齐。任何建议表示赞赏！

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

@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 width="76" style="text-align: left;"><strong>Column 1</strong></th>
        <th width="79" style="text-align: left;"><strong>Column 2</strong></th>
        <th width="90" class="numeric" style="text-align: left;"><strong>Column 3</strong></th>
        <th width="73" class="numeric" style="text-align: left;"><strong>Column 4</strong></th>
        <th width="862" 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>

Answer 1

在标记中，我将副标题包装在 span 中，并给它们 class 的 subheading。在样式中，我为 class 添加了以下规则：visibility:hidden.

这是我的 stackblitz：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 width="76" style="text-align: left">
              <strong>Column 1</strong>
            </th>
            <th width="79" style="text-align: left">
              <strong>Column 2</strong>
            </th>
            <th width="90" class="numeric" style="text-align: left">
              <strong>Column 3</strong>
            </th>
            <th width="73" class="numeric" style="text-align: left">
              <strong>Column 4</strong>
            </th>
            <th width="862" 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>

如何在响应式 table 中获得文本左对齐的 full-width 列

How to get a full-width column with text aligned left in a responsive table

html

css

html-table

responsive-design

responsive