html - 将内联CSS转换为带有类的表格的情节表指南？(Converting inline CSS to stylesheet with classes for a table of episode guide?)

Question

Also at https://pastebin.com/cMaadTZz for full code

(同样在https://pastebin.com/cMaadTZz上获得完整代码)

This is my HTML based on Wikipedia, for an episode guide, it's a test page locally:

(这是我基于Wikipedia的HTML，有关情节指南，它是本地的测试页：)

 <table style="width:100%;"> <tbody> <tr style="color:#fff;"> <th style="background:#FFB90F;">Episode </th> <th style="background:#FFB90F;">Title </th> <th style="background:#FFB90F;">Written by </th> <th style="background:#FFB90F;">Directed by </th> <th style="background:#FFB90F;">Viewers<br />(millions)<sup id="cite_ref-barb_2-1" class="reference"><a href="#cite_note-barb-2">&#91;2&#93;</a></sup> </th> <th style="background:#FFB90F;">Original airdate </th> </tr> <tr class="vevent" style="text-align:center;background:#F2F2F2"> <th scope="row" rowspan="1" id="ep1" style="text-align:center">1</th> <td class="summary" style="text-align:left">"Monster Drivers"</td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center">6.91m</td> <td style="text-align:center">3&#160;July&#160;2000<span style="display:none">&#160;(<span class="bday dtstart published updated">2000-07-03</span>)</span> </td> </tr> <tr class="expand-child"> <td class="description" colspan="7" style="border-bottom:solid 3px #FFB90F"> Alastair assesses the true state of London's congested roads by taking to the skies, and thermal-imaging cameras close in on criminals cowering in a wood.</td> </tr> <tr class="vevent" style="text-align:center;background:#F2F2F2"> <th scope="row" rowspan="1" id="ep2" style="text-align:center">2</th> <td class="summary" style="text-align:left">"Brat Pack"</td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center">6.91m</td> <td style="text-align:center">10&#160;July&#160;2000<span style="display:none">&#160;(<span class="bday dtstart published updated">2000-07-10</span>)</span> </td> </tr> <tr class="expand-child"> <td class="description" colspan="7" style="border-bottom:solid 3px #FFB90F"> Alastair investigates bad and dangerous driving by young inexperienced drivers and youngsters trying to escape police capture, as well as the new horse-cam being used in the North East to stop football hooliganism.</td> </tr> <tr class="vevent" style="text-align:center;background:inherit"> <th scope="row" rowspan="1" id="ep3" style="text-align:center">3</th> <td class="summary" style="text-align:left">"Crash Test Racers"</td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center">6.55m</td> <td style="text-align:center">17&#160;July&#160;2000<span style="display:none">&#160;(<span class="bday dtstart published updated">2000-07-17</span>)</span> </td> </tr> <tr class="vevent" style="text-align:center;background:inherit"> <th scope="row" rowspan="1" id="ep4" style="text-align:center">4</th> <td class="summary" style="text-align:left">"Highway of Tomorrow"</td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center">6.72m</td> <td style="text-align:center">24&#160;July&#160;2000<span style="display:none">&#160;(<span class="bday dtstart published updated">2000-07-24</span>)</span> </td> </tr> <tr class="vevent" style="text-align:center;background:inherit"> <th scope="row" rowspan="1" id="ep5" style="text-align:center">5</th> <td class="summary" style="text-align:left">"Round the Bend"</td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center">5.36m</td> <td style="text-align:center">31&#160;July&#160;2000<span style="display:none">&#160;(<span class="bday dtstart published updated">2000-07-31</span>)</span> </td> </tr> <tr class="vevent" style="text-align:center;background:inherit"> <th scope="row" rowspan="1" id="ep6" style="text-align:center">6</th> <td class="summary" style="text-align:left">"Danger Ahead"</td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center">5.56m</td> <td style="text-align:center">7&#160;August&#160;2000<span style="display:none">&#160;(<span class="bday dtstart published updated">2000-08-07</span>)</span> </td> </tr> </tbody> </table> 

What I am trying to do is convert the inline CSS into classes for between in the head page but I am not sure what will work;

(我想做的是将首页中的内联CSS转换为类，但是我不确定什么会起作用。)

I've only just started trying.

(我才刚刚开始尝试。)

This is my new CSS:

(这是我的新CSS：)

 <style> td.summary { text-align: left; } .season7 { background:#FFB90F; } description.season7 { border-bottom:solid 3px #FFB90F; } </style> <table style="width:100%;"> <tbody> <tr style="color:#fff;"> <th class="season7">Episode </th> <th class="season7">Title </th> <th class="season7">Written by </th> <th class="season7">Directed by </th> <th class="season7">Viewers<br />(millions)<sup id="cite_ref-barb_2-1" class="reference"><a href="#cite_note-barb-2">&#91;2&#93;</a></sup> </th> <th class="season7">Original airdate </th> </tr> <tr class="vevent" style="text-align:center;background:#F2F2F2"> <th scope="row" rowspan="1" id="ep1" style="text-align:center">1</th> <td class="summary">"Monster Drivers"</td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center">6.91m</td> <td style="text-align:center">3&#160;July&#160;2000<span style="display:none">&#160;(<span class="bday dtstart published updated">2000-07-03</span>)</span> </td> </tr> <tr class="expand-child"> <td class="description season7" colspan="7" > Alastair assesses the true state of London's congested roads by taking to the skies, and thermal-imaging cameras close in on criminals cowering in a wood.</td> </tr> <tr class="vevent" style="text-align:center;background:#F2F2F2"> <th scope="row" rowspan="1" id="ep2" style="text-align:center">2</th> <td class="summary">"Brat Pack"</td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center">6.91m</td> <td style="text-align:center">10&#160;July&#160;2000<span style="display:none">&#160;(<span class="bday dtstart published updated">2000-07-10</span>)</span> </td> </tr> <tr class="expand-child"> <td class="description season7" colspan="7" > Alastair investigates bad and dangerous driving by young inexperienced drivers and youngsters trying to escape police capture, as well as the new horse-cam being used in the North East to stop football hooliganism.</td> </tr> <tr class="vevent" style="text-align:center;background:inherit"> <th scope="row" rowspan="1" id="ep3" style="text-align:center">3</th> <td class="summary">"Crash Test Racers"</td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center">6.55m</td> <td style="text-align:center">17&#160;July&#160;2000<span style="display:none">&#160;(<span class="bday dtstart published updated">2000-07-17</span>)</span> </td> </tr> <tr class="vevent" style="text-align:center;background:inherit"> <th scope="row" rowspan="1" id="ep4" style="text-align:center">4</th> <td class="summary">"Highway of Tomorrow"</td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td> <td style="text-align:center">6.72m</td> <td style="text-align:center">24&#160;July&#160;2000<span style="display:none">&#160;(<span class="bday dtstart published updated">2000-07-24</span>)</span> </td> </tr> <tr class="vevent" style="text-align:center;background:inherit"> <th scope="row" rowspan="1" id="ep5" style="text-align:center">5</th> <td class="summary">"Round the Bend"</t

Answer 1

等待大神答复