表边框线/单独编辑

Question

我正在为我的学校开发HTML / CSS项目，但遇到了问题。在我的一个页面上，我有3个表，我想用CSS分别编辑。 我试图将类放在所有表中，但它仍然只接受第二个表的命令。我是否应该在所有TR和TD中加入课程？

body {
  background-color: lightgrey;
}
.tabel1 {
  border-color: purple;
  width: 400px;
  text-align: center;
  height: 100px;
}
.tabel2,
tr,
td {
  width: 350px;
  border-color: grey;
  border-style: solid;
  border-collapse: collapse;
}
.tabel3 {
  border-radius: 25px;
  background: purple;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 4%;
  padding-top: 4%;
  width: 400px;
  border-color: purple;
  box-shadow: 15px 6px 10px purple;
}
.tr1 {
  background-color: purple;
}
.tr2 {
  background-color: #9370DB;
}
.tr3 {
  background-color: purple;
}
.tr4 {
  background-color: #9370DB;
}
.tr5 {
  background-color: purple;
}
.tr6 {
  background-color: #9370DB;
}
.tr7 {
  background-color: purple;
}

<table class="tabel1" align="center">
  <tr>
    <td><strong>Film-Favo's</strong>
    </td>

  </tr>
</table>
<br>

<table class="tabel2" align="center">
  <tr class="tr1">
    <td>Film</td>
    <td>Regisseur</td>
  </tr>

  <tr class="tr2">
    <td>Film 1</td>
    <td>Regisseur 1</td>
  </tr>

  <tr class="tr3">
    <td>De noorderlingen</td>
    <td>Ales van warmerdam</td>
  </tr>

  <tr class="tr4">
    <td>Film 3</td>
    <td>Regisseur 3</td>
  </tr>

  <tr class="tr5">
    <td>Film 4</td>
    <td>Regisseur 4</td>
  </tr>

  <tr class="tr6">
    <td>Film 5</td>
    <td>Regisseur 5</td>
  </tr>

  <tr class="tr7">
    <td>Film 6</td>
    <td>Regisseur 6</td>
  </tr>
</table>
<br>

<table align="center" class="tabel3">
  <tr>
    <td bgcolor="#EE82EE">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
      quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.</td>
  </tr>

Answer 1

如果删除tr，td规范，表格的样式将有所不同。您的CSS应该适用于table，而不适用于行或单元格。

这是Fiddle Demo。

<强> CSS

body {
  background-color: lightgrey;
}

.tabel1 {
  border-color: purple;
  width: 400px;
  text-align: center;
  height: 100px;
}

.tabel2 {
  width: 350px;
  border-color: grey;
  border-style: solid;
  border-collapse: collapse;
}

.tabel3 {
  border-radius: 25px;
  background: purple;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 4%;
  padding-top: 4%;
  width: 400px;
  border-color: purple;
  box-shadow: 15px 6px 10px purple;
}

<强> HTML

<table class="tabel1">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
  </tbody>
</table>
<table class="tabel2">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
  </tbody>
</table>
<table class="tabel3">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
  </tbody>
</table>

<强>结果

Answer 2

最明显的问题是，您已将相同的样式应用于table2，所有 tr元素，以及所有 {{1具有此规则的元素：

td

对后代选择器进行一些研究，并尝试这样做：

.tabel2,
tr,
td {}

但不知何故，我怀疑这是你真正想要的。

Answer 3

table, th, td {
   border: 1px solid black;
}