表格第一行的数据应以粗体显示，仅修改style.css（不是table.html）文件

问题描述 投票：0回答：1

table.html 显示了一个表格，其中包含足球队及其位置的列表。任务是确保球队名称位于俱乐部徽标旁边的中心，我已经这样做了。现在，我正在努力将 table.html 数据中第一名俱乐部的数据加粗。我是 CSS 初学者，希望得到任何帮助。

img {
  vertical-align: middle;
}

td {
  text-align: center;
}

td img {
  max-width: 50px;
}

table tr:first-child {
  font-weight: bold !important;
}

table tr:first-child td {
  font-weight: bold !important;
}
<!DOCTYPE html>
<html>

<head>
  <title>Bundesliga Tabelle</title>
  <link rel="stylesheet" href="style.css">
  <style>
    img {
      width: 20%;
      height: auto;
    }
    
    table {
      margin-left: auto;
      margin-right: auto;
    }
    
    body {
      background-color: grey;
      color: white;
    }
  </style>
</head>

<body>
  <table>
    <caption>Bundesliga Tabelle 21/22</caption>
    <tr>
      <th>Platzierung</th>
      <th>Team</th>
      <th>Tordifferenz</th>
      <th>Punkte</th>
    </tr>
    <tr>
      <td>1</td>
      <td><img src="https://placehold.co/100x100.png"> Bayern</td>
      <td>29</td>
      <td>28</td>
    </tr>
    <tr>
      <td>2</td>
      <td><img src="https://placehold.co/100x100.png"> Dortmund</td>
      <td>11</td>
      <td>24</td>
    </tr>
    <tr>
      <td>3</td>
      <td><img src="https://placehold.co/100x100.png"> Freiburg</td>
      <td>9</td>
      <td>22</td>
    </tr>
    <tr>
      <td>4</td>
      <td><img src="https://placehold.co/100x100.png"> Wolfsburg</td>
      <td>0</td>
      <td>19</td>
    </tr>
    <tr>
      <td>5</td>
      <td><img src="https://placehold.co/100x100.png"> RB Leipzip</td>
      <td>12</td>
      <td>18</td>
    </tr>
    <tr>
      <td>6</td>
      <td><img src="https://placehold.co/100x100.png"> Leverkusen</td>
      <td>7</td>
      <td>18</td>
    </tr>
    <tr>
      <td>7</td>
      <td><img src="https://placehold.co/100x100.png"> Mainz</td>
      <td>4</td>
      <td>17</td>
    </tr>
    <tr>
      <td>8</td>
      <td><img src="https://placehold.co/100x100.png"> Union Berlin</td>
      <td>0</td>
      <td>17</td>
    </tr>
    <tr>
      <td>9</td>
      <td><img src="https://placehold.co/100x100.png"> Mönchengladbach</td>
      <td>-1</td>
      <td>15</td>
    </tr>
    <tr>
      <td>10</td>
      <td><img src="https://placehold.co/100x100.png"> Hoffenheim</td>
      <td>2</td>
      <td>14</td>
    </tr>
    <tr>
      <td>11</td>
      <td><img src="https://placehold.co/100x100.png"> Köln</td>
      <td>-3</td>
      <td>14</td>
    </tr>
    <tr>
      <td>12</td>
      <td><img src="https://placehold.co/100x100.png"> Bochum</td>
      <td>-8</td>
      <td>13</td>
    </tr>
    <tr>
      <td>13</td>
      <td><img src="https://placehold.co/100x100.png"> Hertha</td>
      <td>-12</td>
      <td>13</td>
    </tr>
    <tr>
      <td>14</td>
      <td><img src="https://placehold.co/100x100.png"> Eintracht Frankfurt</td>
      <td>-4</td>
      <td>12</td>
    </tr>
    <tr>
      <td>15</td>
      <td><img src="https://placehold.co/100x100.png"> Stuttgart</td>
      <td>-4</td>
      <td>10</td>
    </tr>
    <tr>
      <td>16</td>
      <td><img src="https://placehold.co/100x100.png"> Augsburg</td>
      <td>-11</td>
      <td>9</td>
    </tr>
    <tr>
      <td>17</td>
      <td><img src="https://placehold.co/100x100.png"> Bielefeld</td>
      <td>-9</td>
      <td>8</td>
    </tr>
    <tr>
      <td>18</td>
      <td><img src="https://placehold.co/100x100.png"> Greuther Fürth</td>
      <td>-21</td>
      <td>1</td>
    </tr>
  </table>

</body>
</html>

css fonts
1个回答
0
投票

table tr:first-child
将选择每个 
<tr>
中的第一个 
<table>
。在您的 
<table>
中，第一行包含标题。

要获取第一行数据，只需使用 

table tr:nth-child(2)

选择第二行 

img {
  vertical-align: middle;
}

td {
  text-align: center;
}

td img {
  max-width: 50px;
}

table tr:nth-child(2) {
  font-weight: bold !important;
}
<!DOCTYPE html>
<html>

<head>
  <title>Bundesliga Tabelle</title>
  <link rel="stylesheet" href="style.css">
  <style>
    img {
      width: 20%;
      height: auto;
    }
    
    table {
      margin-left: auto;
      margin-right: auto;
    }
    
    body {
      background-color: grey;
      color: white;
    }
  </style>
</head>

<body>
  <table>
    <caption>Bundesliga Tabelle 21/22</caption>
    <tr>
      <th>Platzierung</th>
      <th>Team</th>
      <th>Tordifferenz</th>
      <th>Punkte</th>
    </tr>
    <tr>
      <td>1</td>
      <td><img src="https://placehold.co/100x100.png"> Bayern</td>
      <td>29</td>
      <td>28</td>
    </tr>
    <tr>
      <td>2</td>
      <td><img src="https://placehold.co/100x100.png"> Dortmund</td>
      <td>11</td>
      <td>24</td>
    </tr>
    <tr>
      <td>3</td>
      <td><img src="https://placehold.co/100x100.png"> Freiburg</td>
      <td>9</td>
      <td>22</td>
    </tr>
    <tr>
      <td>4</td>
      <td><img src="https://placehold.co/100x100.png"> Wolfsburg</td>
      <td>0</td>
      <td>19</td>
    </tr>
    <tr>
      <td>5</td>
      <td><img src="https://placehold.co/100x100.png"> RB Leipzip</td>
      <td>12</td>
      <td>18</td>
    </tr>
    <tr>
      <td>6</td>
      <td><img src="https://placehold.co/100x100.png"> Leverkusen</td>
      <td>7</td>
      <td>18</td>
    </tr>
    <tr>
      <td>7</td>
      <td><img src="https://placehold.co/100x100.png"> Mainz</td>
      <td>4</td>
      <td>17</td>
    </tr>
    <tr>
      <td>8</td>
      <td><img src="https://placehold.co/100x100.png"> Union Berlin</td>
      <td>0</td>
      <td>17</td>
    </tr>
    <tr>
      <td>9</td>
      <td><img src="https://placehold.co/100x100.png"> Mönchengladbach</td>
      <td>-1</td>
      <td>15</td>
    </tr>
    <tr>
      <td>10</td>
      <td><img src="https://placehold.co/100x100.png"> Hoffenheim</td>
      <td>2</td>
      <td>14</td>
    </tr>
    <tr>
      <td>11</td>
      <td><img src="https://placehold.co/100x100.png"> Köln</td>
      <td>-3</td>
      <td>14</td>
    </tr>
    <tr>
      <td>12</td>
      <td><img src="https://placehold.co/100x100.png"> Bochum</td>
      <td>-8</td>
      <td>13</td>
    </tr>
    <tr>
      <td>13</td>
      <td><img src="https://placehold.co/100x100.png"> Hertha</td>
      <td>-12</td>
      <td>13</td>
    </tr>
    <tr>
      <td>14</td>
      <td><img src="https://placehold.co/100x100.png"> Eintracht Frankfurt</td>
      <td>-4</td>
      <td>12</td>
    </tr>
    <tr>
      <td>15</td>
      <td><img src="https://placehold.co/100x100.png"> Stuttgart</td>
      <td>-4</td>
      <td>10</td>
    </tr>
    <tr>
      <td>16</td>
      <td><img src="https://placehold.co/100x100.png"> Augsburg</td>
      <td>-11</td>
      <td>9</td>
    </tr>
    <tr>
      <td>17</td>
      <td><img src="https://placehold.co/100x100.png"> Bielefeld</td>
      <td>-9</td>
      <td>8</td>
    </tr>
    <tr>
      <td>18</td>
      <td><img src="https://placehold.co/100x100.png"> Greuther Fürth</td>
      <td>-21</td>
      <td>1</td>
    </tr>
  </table>

</body>
</html>

如果将表格标题行放入 <thead> 标签中和/或将数据行放入 

<tbody>
标签中，则可以避免这种情况。但这与这里无关，因为您声明根本不更改 HTML。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.