时间戳

首页 > 解决方案 > 我在使用外部 CSS 文件设置 HTML 表格样式时遇到问题

html - 我在使用外部 CSS 文件设置 HTML 表格样式时遇到问题

问题描述

我正在学习 HTML 和一点 CSS。我在设置 HTML 表格样式时遇到问题。我想专门设计我的桌子。我的意思是我不希望其他表获得与此表相同的样式。所以我使用 ID 来使其具体化。我的问题是，当我在 CSS 中使用“table, th, td”而不是 ID 时，没问题。但是当我使用 Id 而不是那个时，它会被混搭！我想你会从下面的图片中得到我所说的。

这就是没有ID的表格

这就是带有 id 的表格

我想我遗漏了一些东西，或者我不知道如何使用 CSS 设置表格样式。我的代码如下。

table,
th,
td {
  text-align: left;
  border: 3px rgba(73, 73, 75, 255) solid;
  border-collapse: collapse;
  width: 800px;
  height: 100px;
  background-color: rgba(195, 255, 0, 0.8);
  font-family: sans-serif;
  padding: 8px;
  margin-left: 30px;
}
<table id="table01">
  <caption>Some info about BVB players</caption>
  <tr>
    <th>Player LastName</th>
    <th>Player Jersey Number</th>
    <th colspan="2">nationallity</th>
  </tr>
  <tr>
    <td>Reus</td>
    <td>11</td>
    <td>Germany</td>
    <td></td>
  </tr>
  <tr>
    <td>Haaland</td>
    <td>9</td>
    <td>norway</td>
    <td></td>
  </tr>
  <tr>
    <td>Kobel</td>
    <td>1</td>
    <td>Switzerland</td>
    <td></td>
  </tr>
  <tr>
    <td rowspan="2">Dahoud</td>
    <td rowspan="2">8</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Syria</td>
  </tr>
</table>

标签： htmlcss

解决方案

表标签内可能有数十个 td 和 th 元素，并且不可能为每个元素分配一个类或 id。我建议您为主表标签分配一个类名，然后本地选择其余的 td 和 th 元素。试试这个并告诉我结果。

<table class="table1">

.table1,
.table1 td,
.table1 th{
  text-align: left;
  border: 3px rgba(73, 73, 75, 255) solid;
  border-collapse: collapse;
  width: 800px;
  height: 100px;
  background-color: rgba(195, 255, 0, 0.8);
  font-family: sans-serif;
  padding: 8px;
  margin-left: 30px;
}

推荐阅读