响应式表格中断

Question

我有一个连接到数据库的网站。该网站有一个从数据库中提取值的表。我想让这张桌子有反应。我几乎让它工作了，除了其中的一部分。除了标题(乐队名称、城市、角色、风格、SKill)之外，一切都在显示和工作。他们不会出现的。我认为这与最后的CSS代码(内容属性)有关。如果有人有经验或能帮上忙，我将非常感谢！看一看这张照片，看看我的意思

screenshot from problem

​

.table td,
.table th {
  padding: 12px 15px;
  border: 1px solid #ddd;
  text-align: center;
  font-size: 16px;
}

.table tbody tr:nth-child(even) {
  background-color: #e7e7e7;
}

@media(max-width: 500px) {
  .table thead {
    display: none;
  }
  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }
  .table tr {
    margin-bottom: 15px;
  }
  .table td {
    text-align: right;
    padding-left: 50%;
    text-align: right;
    position: relative;
  }
  .table th::before {
    content: attr(scope);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 15px;
    font-size: 15px;
    font-weight: bold;
    text-align: left;
  }
}

<div class="band-finder-table">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Band Name</th>
        <th scope="col">City</th>
        <th scope="col">Role</th>
        <th scope="col">Style</th>
        <th scope="col">Skill</th>
        <th scope="col"></th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr th:each="band : ${bands}">
        <td th:text="${band.bandName}">Band Name</td>
        <td th:text="${band.city}">City</td>
        <td th:text="${band.role.roleName}">Role Name</td>
        <td th:text="${band.style.styleName}">style Name</td>
        <td th:text="${band.skill.level}">Level</td>
        <td><a th:href="@{/band(id=${band.id})}">Edit</a></td>
        <td><a th:href="@{/band/delete(id=${band.id})}">Remove</a></td>
      </tr>
    </tbody>
  </table>

​

Answer 1

我在一个朋友的帮助下回答了这个问题，需要修改的代码是：

 HTML:
 <td data-label="Band Name"th:text="${band.bandName}">Band Name</td>

和

 CSS:
 .table td::before{
  content: attr(data-label);