Пустой столбец в таблице с помощью Bootstrap - PullRequest
Новая
       30

Пустой столбец в таблице с помощью Bootstrap

0 голосов
/ 07 декабря 2018

Я использую Bootstrap для таблицы, и справа добавляется пустой столбец (см. Скриншот).Это странно, особенно потому, что я использую его для другой таблицы, и с этим все в порядке ... но этот решил сделать то, что хочет ^^

Вот таблица HTML: 

<table class="table table-bordered table-hover table-responsive" style="text-align: center">
    <thead>
      <tr>
        <th>{% trans "Issue type" %}</th>
        <th>{% trans "State" %}</th>
        <th>{% trans "Date" %}</th>
        <th>{% trans "New comment" %}</th>
      </tr>
    </thead>
  {% if issues|length == 0 %}
  <tr class="empty-row">
    <td class="no-issue" colspan="3">{% trans "none(f)" %}</td>
  </tr>
  {% endif %}
  {% for issue in issues %}
  <tr class="issue">
    <td><a href="{% url 'customer_support:comment_issue' issue.id %}">
        {% if issue.issue_type %}{{ issue.issue_type }}{% else %}{{ issue.other }}{% endif %}
    </a></td>
    <td>{% if issue.resolved %}
            <span class="badge badge-success">{{ issue.get_state_display }}</span>
        {% else %}
            <span class="badge badge-warning">{{ issue.get_state_display }}</span>
        {% endif %}
    </td>
    <td>{{ issue.date | date }}</td>
    <td>{% if issue.has_notifications %}
            <span class="badge badge-warning">{% trans 'New' %}</span>
        {% else %}
        {% endif %}</td>
  </tr>
  {% endfor %}
</table>

Иснимок экрана и пустой столбец справа:

enter image description here

РЕДАКТИРОВАТЬ:

enter image description here

1 Ответ

0 голосов
/ 07 декабря 2018

После небольшого копания я нашел ответ в документации по Bootstrap (выделение мое):

Адаптивные таблицы позволяют легко прокручивать таблицы по горизонтали.Сделайте любую таблицу отзывчивой во всех окнах просмотра с помощью обтекания a .table с .table-responsive.

Ваш пример использовал .table-responsive на самом <table>, а не наэлемент обертки: 

@import 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css';
<div class="table-responsive">
  <table class="table table-bordered table-hover" style="text-align: center">
    <thead>
      <tr>
        <th>Issue type</th>
        <th>State</th>
        <th>Date</th>
        <th>New comment</th>
      </tr>
    </thead>
    <tbody>
      <tr class="issue">
        <td><a href="#">Autre</a></td>
        <td><span class="badge badge-warning">En cours</span></td>
        <td>6 December 2018</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>
...