html - 如何使用 CSS 覆盖 Word 创建的 HTML 文件中的表格样式

Question

我正在学习 HTML、JavaScript 和 CSS，以从事一个元素，该元素用于修改通过 Word“另存为”功能创建的 HTML 文档。我希望能够使用 Word 将文档另存为“网页，已过滤”。我努力实现的最终目标是能够使用 CSS 来标准化最初在 Microsoft Word 中创建的 HTML 文档。

future 的注意事项:最终，我希望能够使用 JavaScript(目前看来是最好的选择)能够根据表格中的列数应用不同的格式。我还将影响表格的缩进(我认为这可以通过表格上的边距来完成。我还希望能够在正文开头添加一些标签，以便为诸如菜单、固定标题以及可能的一些过度功能之类的东西。

我还有很长的路要走，但正在朝着最终结果迈出一小步。

下面是 Word 仅为表格创建的 HTML 代码。我对其进行了细微修改，因为我计划使用外部 CSS 文件，并且我正在处理删除标题样式的过程。

<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 
   style='border-collapse:collapse'>
   <tr>
      <td width=67 valign=top style='width:.7in;border:solid 
         windowtext 
         1.0pt; padding:0in 5.4pt 0in 5.4pt'>
      <p class=MsoNormal style='margin-bottom:0in;margin- 
         bottom:.0001pt;line-height: normal'><span style='font- 
         size:12.0pt;font-family:"Times New Roman","serif"'>1</span> 
       </p>
      </td>
      <td width=96 valign=top style='width:1.0in;border:solid 
         windowtext 
         1.0pt; border-left:none;padding:0in 5.4pt 0in 5.4pt'>
      <p class=MsoNormal style='margin-bottom:0in;margin- 
         bottom:.0001pt;line-height: normal'><span style='font- 
         size:12.0pt;font-family:"Times New Roman","serif"'>Name
         1</span></p>
      </td>
      <td width=96 valign=top style='width:1.0in;border:solid 
          windowtext 
          1.0pt; border-left:none;padding:0in 5.4pt 0in 5.4pt'>
       <p class=MsoNormal style='margin-bottom:0in;margin 
          bottom:.0001pt;line-height: normal'><span style='font- 
          size:12.0pt;font-family:"Times New Roman","serif"'>Name
          2</span></p>
       </td>
       <td width=96 valign=top style='width:1.0in;border:solid 
           windowtext 1.0pt; border-left:none;padding:0in 5.4pt 0in 
           5.4pt'>
        <p class=MsoNormal style='margin-bottom:0in;margin- 
           bottom:.0001pt;line-height: normal'><span style='font- 
           size:12.0pt;font-family:"Times New Roman","serif"'>This is 
           some text</span></p>
        </td>
    </tr>
    <tr>
        <td width=96 valign=top style='width:1.0in;border:solid 
            windowtext 1.0pt; border-top:none;padding:0in 5.4pt 0in 
            5.4pt'>
        <p class=MsoNormal style='margin-bottom:0in;margin- 
           bottom:.0001pt;line-height: normal'><span style='font- 
           size:12.0pt;font-family:"Times New Roman","serif"'>&nbsp; 
           </span></p>
        </td>
        <td width=96 valign=top style='width:1.0in;border 
            top:none;border-left:none;
            border-bottom:solid windowtext 1.0pt;border-right:solid 
            windowtext 1.0pt; padding:0in 5.4pt 0in 5.4pt'>
        <p class=MsoNormal style='margin-bottom:0in;margin- 
           bottom:.0001pt;line-height: normal'><span style='font- 
           size:12.0pt;font-family:"Times New Roman","serif"'>&nbsp; 
           </span></p>
        </td>
        <td width=96 valign=top style='width:1.0in;border- 
            top:none;border-left:none;
            border-bottom:solid windowtext 1.0pt;border-right:solid 
            windowtext 1.0pt; padding:0in 5.4pt 0in 5.4pt'>
        <p class=MsoNormal style='margin-bottom:0in;margin- 
           bottom:.0001pt;line-height:
           normal'><span style='font-size:12.0pt;font-family:"Times 
           New Roman","serif"'>&nbsp;</span></p>
        </td>
        <td width=96 valign=top style='width:1.0in;border- 
            top:none;border-left:none;
            border-bottom:solid windowtext 1.0pt;border-right:solid 
            windowtext 1.0pt;
            padding:0in 5.4pt 0in 5.4pt'>
        <p class=MsoNormal style='margin-bottom:0in;margin 
           bottom:.0001pt;line-height:
           normal'><span style='font-size:12.0pt;font-family:"Times 
           New Roman","serif"'>&nbsp;</span></p>
        </td>
  </tr>
</table>

下面是我试过的 CSS 代码。下面是最新版本，但我在其他帖子中看到 !important 应该让我覆盖内联样式。在此示例中，我对宽度和样式都进行了修改，因为 Word 中的 HTML 两者都有，但我只尝试了一个和另一个。

body {
    font-family: "Arial";
}

table {
    width=100% !important;
}
td[style]:nth-child(1) {
    width=5% !important;
    style='width:5%;border:solid windowtext 1.0pt; border- 
               top:none;padding:0in 5.4pt 0in 5.4pt' !important>
}
td[style]:nth-child(2) {
    width=10% !important;
    style='width:10%;border:solid windowtext 1.0pt; border- 
               top:none;padding:0in 5.4pt 0in 5.4pt' !important>
}
td[style]:nth-child(3) {
    width=10% !important;
    style='width:10%;border:solid windowtext 1.0pt; border- 
               top:none;padding:0in 5.4pt 0in 5.4pt' !important>
}
td[style]:nth-child(4) {
    width=75% !important;
    style='width:79%;border:solid windowtext 1.0pt; border-            
               top:none;padding:0in 5.4pt 0in 5.4pt' !important>
}

我希望页面的输出让表格都占网页的一定百分比，并定义列的百分比。例如表格为100%，第1列为5%，第1列为10%，第1列为10%，第4列为75%，

Answer 1

您发布的 CSS 无效。修复它，它应该会按预期运行。

body {
  font-family: "Arial";
}

table {
  width: 100% !important;
}

td:nth-child(1) {
  width: 5% !important;
  border: solid windowtext 1pt;
  border-top: none;
  padding: 0in 5.4pt 0in 5.4pt !important;
}

td:nth-child(2) {
  width: 10% !important;
  border: solid windowtext 1pt;
  border-top: none;
  padding: 0in 5.4pt 0in 5.4pt !important;
}

td:nth-child(3) {
  width: 10% !important;
  border: solid windowtext 1pt;
  border-top: none;
  padding: 0in 5.4pt 0in 5.4pt !important;
}

td:nth-child(4) {
  width: 75% !important;
  border: solid windowtext 1pt;
  border-top: none;
  padding: 0in 5.4pt 0in 5.4pt !important;
}

<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 style='border-collapse:collapse'>
  <tr>
    <td width=67 valign=top style='width:.7in;border:solid 
         windowtext 
         1.0pt; padding:0in 5.4pt 0in 5.4pt'>
      <p class=MsoNormal style='margin-bottom:0in;margin- 
         bottom:.0001pt;line-height: normal'><span style='font- 
         size:12.0pt;font-family:"Times New Roman","serif"'>1</span>
      </p>
    </td>
    <td width=96 valign=top style='width:1.0in;border:solid 
         windowtext 
         1.0pt; border-left:none;padding:0in 5.4pt 0in 5.4pt'>
      <p class=MsoNormal style='margin-bottom:0in;margin- 
         bottom:.0001pt;line-height: normal'><span style='font- 
         size:12.0pt;font-family:"Times New Roman","serif"'>Name
         1</span></p>
    </td>
    <td width=96 valign=top style='width:1.0in;border:solid 
          windowtext 
          1.0pt; border-left:none;padding:0in 5.4pt 0in 5.4pt'>
      <p class=MsoNormal style='margin-bottom:0in;margin 
          bottom:.0001pt;line-height: normal'><span style='font- 
          size:12.0pt;font-family:"Times New Roman","serif"'>Name
          2</span></p>
    </td>
    <td width=96 valign=top style='width:1.0in;border:solid 
           windowtext 1.0pt; border-left:none;padding:0in 5.4pt 0in 
           5.4pt'>
      <p class=MsoNormal style='margin-bottom:0in;margin- 
           bottom:.0001pt;line-height: normal'><span style='font- 
           size:12.0pt;font-family:"Times New Roman","serif"'>This is 
           some text</span></p>
    </td>
  </tr>
  <tr>
    <td width=96 valign=top style='width:1.0in;border:solid 
            windowtext 1.0pt; border-top:none;padding:0in 5.4pt 0in 
            5.4pt'>
      <p class=MsoNormal style='margin-bottom:0in;margin- 
           bottom:.0001pt;line-height: normal'><span style='font- 
           size:12.0pt;font-family:"Times New Roman","serif"'>&nbsp; 
           </span></p>
    </td>
    <td width=96 valign=top style='width:1.0in;border 
            top:none;border-left:none;
            border-bottom:solid windowtext 1.0pt;border-right:solid 
            windowtext 1.0pt; padding:0in 5.4pt 0in 5.4pt'>
      <p class=MsoNormal style='margin-bottom:0in;margin- 
           bottom:.0001pt;line-height: normal'><span style='font- 
           size:12.0pt;font-family:"Times New Roman","serif"'>&nbsp; 
           </span></p>
    </td>
    <td width=96 valign=top style='width:1.0in;border- 
            top:none;border-left:none;
            border-bottom:solid windowtext 1.0pt;border-right:solid 
            windowtext 1.0pt; padding:0in 5.4pt 0in 5.4pt'>
      <p class=MsoNormal style='margin-bottom:0in;margin- 
           bottom:.0001pt;line-height:
           normal'><span style='font-size:12.0pt;font-family:"Times 
           New Roman","serif"'>&nbsp;</span></p>
    </td>
    <td width=96 valign=top style='width:1.0in;border- 
            top:none;border-left:none;
            border-bottom:solid windowtext 1.0pt;border-right:solid 
            windowtext 1.0pt;
            padding:0in 5.4pt 0in 5.4pt'>
      <p class=MsoNormal style='margin-bottom:0in;margin 
           bottom:.0001pt;line-height:
           normal'><span style='font-size:12.0pt;font-family:"Times 
           New Roman","serif"'>&nbsp;</span></p>
    </td>
  </tr>
</table>