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>

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