响应表中断

Question

我有一个连接到数据库的网站。该网站有一个表，用于从数据库中提取值。我希望该表能够响应。除了一部分之外，我几乎都能正常工作。除了标题（乐队名称，城市，角色，样式，技能）外，其他所有内容都在显示和运行中。他们不会显示。我认为这与最后的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);