Нижний колонтитул таблицы HTML не может охватить все столбцы - PullRequest
Новая
       18

Нижний колонтитул таблицы HTML не может охватить все столбцы

0 голосов
/ 29 января 2019

ВНИМАНИЕ: Да, цвета не самые лучшие.Это было то, что было запрошено / часть цветов моей компании.Может быть, однажды это изменится, но сейчас это то, что есть.(Если вам известен способ сделать их более прозрачными, я тоже могу это исправить! Я не уверен в RGBA для этих цветов.)

I 'я пробовал colspan безрезультатно.Я пробовал с и без ... Кажется, ничего не работает.Вот только две опции, которые я, кажется, могу настроить:

Closest Visual I Can Get

Ниже приведен Jinja, используемый для создания отображаемого HTML. 

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;»к стилю нижнего колонтитула, но без изменений.

Using TD tags

Выше, когда я добавляю тег TD - независимо от colspan.

Я не эксперт по HTML, я вырос на MySpace и собрал вещи, которые мне были нужны за эти годы.На этот раз я в тупик!

Заранее спасибо.

1 Ответ

0 голосов
/ 29 января 2019

Я думаю, вам нужно добавить TD в нижний колонтитул таблицы.А затем используйте colspan = 2 в этом TD.Я получил ваш код и очистил его, чтобы оставить только 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>

И вот что он дал мне в браузере: enter image description here

...