表类无法在 html/css 中识别/读取

Question

我有一个表，该表应该具有“table-class”类，但是该类甚至无法识别/读取，并且属性也不会显示在表中。我正在使用 azure appServiceEditor，当我运行代码时，输​​出只是一个默认样式表，因此不会读取 class="table-class" 的属性。但是，当我插入任何其他类而不是“表类”时，会显示属性。我不明白问题出在哪里。

.table-class {
  position: absolute;
  display: block;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  z-index: 10000000;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5%;
  color: white;
}

.table-class td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.table-class tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.6);
}

<table class="table-class">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Answer 1

.table {
  position: absolute;
  display: block;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  z-index: 10000000;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5%;
  color: white;
}

.table td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.table tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.6);
}

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

使用此代码而不是表类