Шаблон django устанавливает одинаковый размер всех столбцов таблицы

вот мои шаблоны, и что они отображают : template.html

<div class="card">
  <div class="card-body p-0">
    <table class="table" style="width: 100%;">
      <tbody>
        <tr>
          {% for field in fields %}
            {% if field != "rehabilitation" and field != "operation_type" and field != "subvention" and field != "history" %}
              {% if field|is_sortable == False %}
                <th bgcolor="gray" style="color: white; width: 5%">{{ field }}</th>
              {% elif field != "related_projects" and field != "history" %}
                <th bgcolor="gray" style="color: white; width: 5%">
                  <a href="?order_by={{ field }}" style="color: white">{{ field }}</a>
                  {% include 'projects/functionalities/filter.html' %}
                </th>
              {% endif %}
            {% endif %}
          {% endfor %}
        </tr>
        <tr>
          <td>hey</td>
          <td>helllooooooo</td>
          <td>hello how are you ?</td>
          <td>yo</td>
          <td>teeeest</td>
          <td>aaa</td>
          <td>bbb</td>
          <td>cccccccccccccccccc</td>
          <td>wow</td>
          <td>testestestest</td>
          <td>test test test test</td>
          <td>i'm testing this</td>
          <td>whyyy does this don't work</td>
          <td>hello</td>
          <td>hey</td>
          <td>hey</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

filter.html

<form class="d-flex flex-column bd-highlight mb-5" method="GET" action="{% url 'project-list' %}">
  {% csrf_token %}
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search" name="search">
    <div class="input-group-btn">
      <button class="btn btn-success" type="submit"></button>
    </div>
  </div>
</form>

и вот что у меня на экране :

screenshot_my_app

Как вы можете видеть, все колонки имеют разный размер в зависимости от того, что написано внутри, и это делает мои зоны ввода текста уродливыми.

Я бы хотел, чтобы все кнопки выглядели так и имели одинаковый размер :

ideal search button

Кто-нибудь знает, как я могу сделать все мои колонки одинакового размера (и зеленую кнопку такого же размера, как текстовое поле, если это возможно)

В таком случае можно воспользоваться помощью CSS установив ширину и высоту ячейки в таблице.

<style>
   .table{
        width:200px;
        table-layout:fixed;             
         }
</style>
Вернуться на верх