Question

我有这个CSS代码，可以使表格可滚动，并且工作正常。但是，css类表固定会影响所有表，即使未调用该类也是如此。可能是什么问题？？

我尝试注释表固定的类，并且html表显示为默认表。但是我不能使用默认表，因为我想要这个样式可滚动的表。

.table_fixed {
  width: 100%;
  background-color: white;
}

.table_fixed tbody {
  overflow-y: auto;
  width: 100%;
}

.table_fixed thead,
tbody,
tr,
td,
th {
  display: block;
}

.table_fixed tbody td {
  float: left;
}

.table_fixed thead tr th {
  float: left;
}

.table_fixed tbody tr:hover {
  cursor: pointer;
}

<table class="table-fixed" id="my-tbl-1">
  <thead>
    <tr>
      <th class="col-2">Item NO</th>
      <th class="col-2">Title</th>
      <th class="col-2">Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-2">1</td>
      <td class="col-2">Test Item</td>
      <td class="col-2">10</td>
    </tr>
  </tbody>
</table>


<table id="my-tbl-2">
  <thead>
    <tr>
      <th>Item NO</th>
      <th>Title</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Test Item</td>
      <td>10</td>
    </tr>
  </tbody>
</table>

表固定的类应影响my-table-1表，除非调用该类，否则它不应影响任何其他表。我看不出这里是什么问题。

Answer 1

此CSS应用于所有tbody，tr，td和th元素

.table_fixed-01 thead,
tbody,
tr,
td,
th {
  display: block;
}

如果您只想更改.table_fixed-01下的元素，则可以这样做，例如：

.table_fixed-01 > thead,
.table_fixed-01 > tbody,
.table_fixed-01 > tbody > tr,
.table_fixed-01 > tbody > tr > td,
.table_fixed-01 > tbody > tr > th {
  display: block;
}

我不确定您要使表格看起来像什么，但是我想可以更好地完成您想要的工作。但是，该CSS块似乎可能是导致您出现问题的原因。

CSS即使不被调用也适用

1 个答案: