不存在数据时，数据列重叠 - HTML答案

【问题标题】：data-column is getting overlapped when no data is present - HTML不存在数据时，数据列重叠 - HTML
【发布时间】：2021-08-11 19:35:58
【问题描述】：

我正在尝试在移动设备上显示以下页面。

该页面在移动设备上显示为磁贴。我在这里面临的问题是，只要不存在列数据，它就会与下面的其他列重叠

有列数据

没有列数据

即使没有数据，我如何使列可见。

<!DOCTYPE html>
<html>

<head>
  <style>
    @media only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px) {
      table {
        width: 100%;
      }
      /* Force table to not be like tables anymore */
      table,
      thead,
      tbody,
      th,
      td,
      tr {
        display: block;
      }
      /* Hide table headers (but not display: none;, for accessibility) */
      thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }
      tr {
        border: 2px solid rgb(176 173 171);
      }
      td {
        /* Behave  like a "row" */
        border: none;
        /*border-bottom: 1px solid #eee; */
        position: relative;
        padding-left: 34%;
      }
      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;
        /* Label the data */
        content: attr(data-column);
        border-color: darkgrey !important;
        color: #000;
        font-weight: bold;
        word-wrap: break-word;
      }
    }
  </style>
</head>

<body>
  <table>
    <thead>
      <tr>

      </tr>
    </thead>
    <tbody>
      <tr key={row.Id} class="slds-m-top_xx-small">
        <td scope="row" data-column="Col1" data-id={row.Id}>
          Test
        </td>
        <td scope="row" data-column="Col2">
          Test1
        </td>
        <td scope="row" data-column="Col3">
          Test2
        </td>
        <td scope="row" data-column="Col4">

        </td>
        <td scope="row" data-column="Col5">
          Test3
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【问题讨论】：

无数据时插入空格：&nbsp;.

标签： html css html-table

【解决方案1】：

您需要在 td 中删除左侧填充，也需要在 CSS 之前删除位置：absolute

<!DOCTYPE html>
<html>

<head>
  <style>
    @media only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px) {
      table {
        width: 100%;
      }
      /* Force table to not be like tables anymore */
      table,
      thead,
      tbody,
      th,
      td,
      tr {
        display: block;
      }
      /* Hide table headers (but not display: none;, for accessibility) */
      thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }
      tr {
        border: 2px solid rgb(176 173 171);
      }
      td {
        /* Behave  like a "row" */
        border: none;
        /*border-bottom: 1px solid #eee; */
        position: relative;
        /*padding-left: 34%; */
      }
      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;
        /* Label the data */
        content: attr(data-column);
        border-color: darkgrey !important;
        color: #000;
        font-weight: bold;
        word-wrap: break-word;
      }
    }
  </style>
</head>

<body>
  <table>
    <thead>
      <tr>

      </tr>
    </thead>
    <tbody>
      <tr key={row.Id} class="slds-m-top_xx-small">
        <td scope="row" data-column="Col1" data-id={row.Id}>
          Test
        </td>
        <td scope="row" data-column="Col2">
          Test1
        </td>
        <td scope="row" data-column="Col3">
          Test2
        </td>
        <td scope="row" data-column="Col4">

        </td>
        <td scope="row" data-column="Col5">
          Test3
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【讨论】：

苛刻..我实施了你的解决方案。但在这种情况下，如果列数据很长。例如一些地址，它没有正确对齐。如果我删除位置：绝对会发生这种情况。我附上了截图