CODEWITHSUNDEEP
htmlcss
Thilina Chathuranga
Thilina Chathuranga

Reputation: 13

Css applies even it is not called

I have this css code to make a table scroll-able and it works fine. But, css class table-fixed affects to all the tables even the class is not called. what could be the issue??

I tried commenting the table-fixed class and html tables shows like default tables. but i can not use default tables because i want this styled scroll-able table.

.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>

The table-fixed class should affect my-table-1 table and it should not affect any other table unless the class is called. I can not see what is the issue here..

Upvotes: 1

Views: 31

Answers (1)

abney317
abney317

Reputation: 8492

This CSS is being applied to all tbody, tr, td, and th elements

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

If you only want to change the elements under .table_fixed-01 then you'd do this, for example:

.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;
}

I'm not sure what you're trying to make your table look like, but I imagine there is a better what to accomplish what you're going for. That CSS block seems likely to be the cause of your problems though.

Upvotes: 2

Related Questions