Python结合dominate与Bootstrap生成HTML报告 样式添加无效求助

核心失效原因 #

• 版本与类名不匹配
  你当前引用的是Bootstrap 3.4.1版本的样式文件，该版本根本没有table-dark、thead-dark对应的深色主题样式定义，这两个类是Bootstrap 4及之后版本新增的规则，3.x版本的样式表中找不到对应代码，自然无法生效。
• 类名书写格式错误
  在cls参数中定义类名时，错误地在类名前添加了CSS选择器专用的前缀.，比如写的.table-dark会被dominate直接渲染为class=".table-dark"，浏览器会把这个带点的字符串识别为类名本身，根本匹配不到任何CSS规则。
• DOM嵌套结构错误
  代码里把tbody块写在了thead的作用域内部，最终生成的HTML会将<tbody>嵌套在<thead>标签内，既不符合HTML编写规范，也会导致Bootstrap针对表格子元素的层级选择器匹配失效，连带影响边框、条纹、悬停高亮等所有表格样式的正常生效。

修复操作 #

• 移除类名前所有无效的.符号，保证类名是纯文本格式，不带CSS选择器前缀
• 对齐Bootstrap版本与使用的类名：如果继续使用当前的Bootstrap 3.x版本，需要删除table-dark、thead-dark这两个无效类；如果需要使用深色表格、深色表头的效果，替换为对应高版本Bootstrap的样式资源，保证类名和资源版本完全匹配
• 调整dominate的上下文嵌套关系，将tbody块移出thead的作用域，让thead和tbody都成为table标签的直接子节点，保证生成的DOM结构合规

修正后代码示例 #

from dominate import document
from dominate.tags import link, div, h1, table, thead, tbody, tr, th, td
import re

doc = document(title='报告标题')
with doc.head:
    # 如需使用深色表格类，替换为匹配版本的Bootstrap样式资源即可
    link(rel='stylesheet', href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css")
with doc:
    with div(cls='container'):
        h1("Sjsdhsdss")
        # 类名移除多余的点号，移除3.x不支持的深色类
        with table(id='main', cls='table table-striped table-bordered table-hover'):
            with thead():
                with tr():
                    th("Host")
                    th("Status")
                    th("Reason")
            # tbody 移出thead作用域，成为table的直接子节点
            with tbody():
                for i in server_list:
                    for j in iwfhjcn:
                        if re.search(i, j[0]):
                            with tr():
                                td(j[0])
                                td(j[1])
                                td(j[2])

注：如果需要深色表格效果，直接把head里的样式链接换成Bootstrap 5版本的资源，然后在table的类名里加上table-dark、thead的类名里加上table-dark，就能实现深色表头和深色表格的效果。

内容的提问来源于stack exchange，提问作者Murali L