Сделать столбцы стандартной ширины в файле html5 - PullRequest
0 голосов
/ 03 марта 2020

Я бы хотел установить длину столбца в таблице равной длине содержимого таблицы. Ниже описано, как я определил имена столбцов:


<html>
<head>
  <title>Dataframe in Flask template</title>
</head>
<body>
  <div>
    <h2>Dashboard</h2>
    <table id="Mapped table" border="1">
       <tr>
        {% for col in column_names %}
        <th>{{col}}</th>
        {% endfor %}
      </tr>
      {% for row in rows %}
      <tr>
        {% for key, val in row.items() %}
          {% if key == link_column %}
          <td>
            <select class="dropbtn">
              {% for choice in choices %}
                <option value={{ choice[0] }}
                {% if choice[0] == val %} selected {% endif %}>
                  {{ choice[1] }}
                </option>
              {% endfor %}
            </select>
            {% elif key == link_column2 %}
          <td>
            <select class="dropbtn">
              {% for choice in choices2 %}
                <option value={{ choice[0] }}
                {% if choice[0] == val %} selected {% endif %}>
                  {{ choice[1] }}
                </option>
              {% endfor %}
            </select>
            {% elif key == link_column3 %}
              <td>
            <select class="dropbtn">
              {% for choice in choices3 %}
                <option value={{ choice[0] }}
                {% if choice[0] == val %} selected {% endif %}>
                  {{ choice[1] }}
                </option>
              {% endfor %}
            </select>
            {% elif key == link_column4 %}
          <td>
            <select class="dropbtn">
              {% for choice in choices4 %}
                <option value={{ choice[0] }}
                {% if choice[0] == val %} selected {% endif %}>
                  {{ choice[1] }}
                </option>
              {% endfor %}
            </select>
            {% elif key == link_column5 %}
          <td>
            <select class="dropbtn">
              {% for choice in choices5 %}
                <option value={{ choice[0] }}
                {% if choice[0] == val %} selected {% endif %}>
                  {{ choice[1] }}
                </option>
              {% endfor %}
            </select>
            {% elif key == link_column6 %}
          <td>
            <select class="dropbtn">
              {% for choice in choices6 %}
                <option value={{ choice[0] }}
                {% if choice[0] == val %} selected {% endif %}>
                  {{ choice[1] }}
                </option>
              {% endfor %}
            </select>
            {% elif key == link_column7 %}
          <td>
            <select class="dropbtn">
              {% for choice in choices7 %}
                <option value={{ choice[0] }}
                {% if choice[0] == val %} selected {% endif %}>
                  {{ choice[1] }}
                </option>
              {% endfor %}
            </select>
            {% elif key == link_column8 %}
          <td>
            <select class="dropbtn">
              {% for choice in choices8 %}
                <option value={{ choice[0] }}
                {% if choice[0] == val %} selected {% endif %}>
                  {{ choice[1] }}
                </option>
              {% endfor %}
            </select>
            {% elif key == link_column9 %}
          <td>
            <select class="dropbtn">
              {% for choice in choices9 %}
                <option value={{ choice[0] }}
                {% if choice[0] == val %} selected {% endif %}>
                  {{ choice[1] }}
                </option>
              {% endfor %}
            </select>
            {% elif key == link_column10 %}
          <td>
            <select class="dropbtn">
              {% for choice in choices10 %}
                <option value={{ choice[0] }}
                {% if choice[0] == val %} selected {% endif %}>
                  {{ choice[1] }}
                </option>
              {% endfor %}
            </select>
            {% elif key == link_column11 %}
          <td>
            <select class="dropbtn">
              {% for choice in choices11 %}
                <option value={{ choice[0] }}
                {% if choice[0] == val %} selected {% endif %}>
                  {{ choice[1] }}
                </option>
              {% endfor %}
            </select>
            {% elif key == link_column12 %}
          <td>
            <select class="dropbtn">
              {% for choice in choices12 %}
                <option value={{ choice[0] }}
                {% if choice[0] == val %} selected {% endif %}>
                  {{ choice[1] }}
                </option>
              {% endfor %}
            </select>
            {% elif key == link_column13 %}
          <td>
            <select class="dropbtn">
              {% for choice in choices13 %}
                <option value={{ choice[0] }}
                {% if choice[0] == val %} selected {% endif %}>
                  {{ choice[1] }}
                </option>
              {% endfor %}
            </select>
          </td>
          {% else %}
          <td>
            {{ val }}
          </td>
          {% endif %}
        {% endfor %}
      </tr>
      {% endfor %}
    </table>
  </div>
    <button class="button execute" name="submit" value="submit">Submit</button>

</body>
</html>

Это таблица, которую я получаю с помощью своего кода. Столбцы с опцией выпадающего списка используют длину содержимого. Я хочу, чтобы столбец описания элемента также соответствовал ширине содержимого. Прямо сейчас это «завернуто», я думаю?

enter image description here

С уважением

1 Ответ

1 голос
/ 03 марта 2020
table td:nth-child(4) {white-space: nowrap;} 

попробуйте css в своем коде

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...