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

user_16716013 0
Viewed 193

I'm trying to make a stackable responsive table, and I need some of the rows to be full-width (headers within in the table). I can't get the text to align left when in mobile view. Any advice is appreciated!

With the code below, the row for Subheading 1 will display the data-title twice in mobile. In the row for Subheading 2, where the data-title is blank, it will display it in the second column in mobile. I need it to pop over to the first column in mobile, or somehow become 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>

responsive-design responsive html-table css html
1 Answers

In the markup, I wrapped the subheadings in a span and gave them a class of subheading. In the styling, I added the following rule for that class: visibility:hidden.

Here's my 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>

user_27231670
Related