HTML 表格页脚无法跨越所有列

Question

警告：是的，颜色不是最好的。这是我公司要求的/部分颜色。也许有一天它会改变，但现在它就是这样。 （如果您知道一种使它们更透明的方法，我也愿意修复它！不过，我不确定这些颜色的 RGBA。）

我试过 colspan 无济于事。我试过有无……似乎没有任何效果。这是我似乎能够设置的仅有的两个选项：

下面是用于创建显示的 HTML 的 Jinja。

jinja_tmplt = """<style>
        table.greenCisco {
          border: 2px solid #005C21;
          background-color: #6CC04A;
          width: 100%;
          text-align: center;
          border-collapse: collapse;
        }
        tr:nth-child(even) {
            background: #ABC233;
        }
        tr:nth-child(odd) {
            background: #6CC04A;
        }
        table.greenCisco td, table.greenCisco th {
          border: 2px solid #000000;
          padding: 3px 2px;
        }
        table.greenCisco tbody td {
            color: #FFFFFF;
        }
        table.greenCisco thead {
          background: #005C21;
          border-bottom: 1px solid #444444;
        }
        table.greenCisco thead th {
          font-size: 15px;
          font-weight: bold;
          color: #FFFFFF;
          text-align: center;
          border-left: 2px solid #D0E4F5;
        }
        table.blueTable tfoot {
          font-size: 13px;
          font-weight: bold;
          color: #FFFFFF;
          background: #D0E4F5;
          text-align: center;
          border-top: 2px solid #444444;
        }
    </style>
{% for html_CI in html_CI_list %}
    {% set columns = html_CI.tech_DF.columns.values[1:] %}
    <h1>{{ html_CI.tech_grp }}</h1><br/>
    <table class="greenCisco">
        <thead>
            <tr>
            {% for col_hdr in columns %}
                <th>{{ col_hdr }}</th>
            {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row in html_CI.tech_DF.itertuples() %}
                {% set row_num = loop.index0 %}
                {% if row_num % 2 == 0 %}
                    <tr bgcolor="#ABC233">
                {% else %}
                    <tr bgcolor="#6CC04A">
                {% endif %}
                {% for elem_data in row[2:] %}
                    {% set loop_num = loop.index0 %}
                    {% if loop_num == 0 %}
                        <td>{{ elem_data }}</td>
                    {% else %}
                        {% if elem_data == 0 %}
                            <td><div style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</div></td>
                        {% elif elem_data == 1 %}
                            <td><div style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</div></td>
                        {% elif elem_data == 2 %}
                            <td><div style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</div></td>
                        {% endif %}
                    {% endif %}
                {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
        <tfoot valign="center">
            <tr colspan="0" style="width: 100%"><span style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</span> <b>Pending</b> <span style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</span> <b>In Progress</b> <span style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</span> <b>Complete</b></tr>
        </tfoot>
    </table>
{% endfor %}"""

我也尝试过添加“display: flex; flex-direction:column;”到页脚的样式，但没有变化。

以上是我添加 TD 标签的时候——不管 colspan。

我不是 HTML 专家，我是在 MySpace 上长大的，多年来我一直在拼凑我需要的东西。这个我被难住了！

提前谢谢你。

Answer 1

我认为您需要在表格页脚中添加 TD。然后在该 TD 中使用 colspan = 2。 我得到了你的代码并清理了它，只留下 HTML 和 CSS。我删除了 tbody 中的逻辑。页脚在这里有这段代码：

<table class="greenCisco">
    <thead>
        <tr>

            <th>Col one</th>
            <th>Col two</th>

        </tr>
    </thead>
    <tbody>

        <tr bgcolor="#ABC233">

            <td>2</td>
               <td>
                  <div style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">300</div>
                </td>


            </tr>

    </tbody>
    <tfoot valign="center">
        <tr  style="width: 100%">
            <td colspan="2"><span style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</span> 
             <b>Pending</b> <span style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</span> <b>In Progress</b> <span style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</span> <b>Complete</b>
            </td>
        </tr>
    </tfoot>

这就是它在浏览器中给我的：