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。我删除了正文中的逻辑。页脚在此处具有以下代码：

<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>

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

HTML表页脚无法跨所有列

1 个答案: