Bootstrap неверное форматирование таблицы в Chrome, но правильное в Firefox

Question

У меня есть таблица bootstrap, которая полностью правильно отформатирована в Firefox, но все выбрасывается вправо на Chrome. Есть идеи?

Firefox:

Chrome:

Первоначально я думал, что это может быть связано с тем, что он находится внутри элемента, чувствительного к таблице, но я удалил его, и это не имело никакого значения.

! ----- ОБНОВЛЕНИЕ -----!

Похоже, это размер столбца. Если я удаляю это, тогда форматирование возвращается к нормальному состоянию, но я не могу контролировать размеры столбцов таблицы.

Вот HTML:

<div class="row">
  <div class="col">
      <table class="table">
        <tr>
          <th class="col-1 text-center"><input class="form-check-input position-static" type="checkbox" id="checkAll" value="option1"></th>
          <th class="col-2"><a class="text-body" href="?page={{ contacts.number }}&order_by=displayName">Name</a></th>
          <th class="col-3 d-none d-lg-table-cell"><a class="text-body" href="?page={{ contacts.number }}&order_by=companyName">Organisation</a></th>
          <th class="col-3 d-none d-lg-table-cell"><a class="text-body" href="?page={{ contacts.number }}&order_by=jobTitle">Job Title</a></th>
          <th class="col-1 d-none d-md-table-cell"><a class="text-body" href="?page={{ contacts.number }}&order_by=profession">NSO</a></th>
          <th class="col-1 d-none d-lg-table-cell"><a class="text-body" href="?page={{ contacts.number }}&order_by=lastModifiedDateTime">Last Updated</a></th>
          <th class="col-1">Profile</th>
        </tr>
        {% if contacts %}
        {% for contact in contacts %}
        <tr>
          <td class="col-1 text-center"><input class="form-check-input position-static" type="checkbox" id="blankCheckbox" name='selected_contact' value={{ contact.per_contact_id }}></td>
          <td class="col-2"><a href="mailto:?bcc={{ contact.emailAddresses.0.address }}" class="text-primary">{{ contact.displayName }}</a></td>
          <td class="col-3 d-none d-lg-table-cell">{{ contact.companyName }}</td>
          <td class="col-3 d-none d-lg-table-cell">{{ contact.jobTitle }}</td>
          <td class="col-1 d-none d-md-table-cell">{{ contact.profession }}</a></td>
          <td class="col-1 d-none d-lg-table-cell">{{ contact.modified }}</td>
          <td class="col-1"><button name="submit_button" type="submit" class="btn btn-link text-success noline" value={{ contact.per_contact_id }}>View</button></td>
        </tr>
        {% endfor %}
        {% endif %}
      </table>
  </div>
</div>

Answer 1

Я посмотрел документацию для версии 4, но в разделе Макет или Таблица ничего не говорится о том, что вы можете использовать классы макета в ячейках таблицы так, как вы здесь. В частности, свойство flex не работает с ячейками таблицы.

Первый столбец очень широкий в Chrome, поскольку все классы col-* имеют ширину 100%. В Chrome это приводит к тому, что первый столбец пытается занять 100% пространства, поэтому он оказывается очень широким и заставляет другие столбцы быть узкими.

Рассмотрите возможность добавления к Bootstrap существующие классы ширины вместо того, чтобы пытаться определить размер столбца с помощью классов разметки:

.w-8 {
  width: 8.333%;
}

.w-16 {
  width: 16.667;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<table class="table">
  <thead>
    <tr>
      <th class="text-center w-8"><input class="form-check-input position-static" type="checkbox" id="checkAll" value="option1"></th>
      <th class="w-16">Name</th>
      <th class="w-25 d-none d-lg-table-cell">Organization</th>
      <th class="w-25 d-none d-lg-table-cell">Job Title</th>
      <th class="w-8 d-none d-md-table-cell">NSO</th>
      <th class="w-8 d-none d-lg-table-cell">Last Updated</th>
      <th class="w-8">Profile</th>
    </tr>
  </thead>
  <tbody>
     <tr>
          <td class="text-center w-8"><input class="form-check-input position-static" type="checkbox" id="blankCheckbox" name='selected_contact' value=""></td>
          <td class="w-16"><a href="mailto:" class="text-primary">Example Name</a></td>
          <td class="w-25 d-none d-lg-table-cell">Example Company</td>
          <td class="w-25 d-none d-lg-table-cell">Example Title</td>
          <td class="w-8 d-none d-md-table-cell">Example Profession</a></td>
          <td class="w-8 d-none d-lg-table-cell">MM/DD/YYY</td>
          <td class="w-8"><button name="submit_button" type="submit" class="btn btn-link text-success noline" value="">View</button></td>
        </tr>
  </tbody>
</table>

Создайте классы w-8 и w-16, используйте их и существующий класс w-25 для замены классов col-* в вашей таблице. Я сделал работоспособную версию без кода Django, чтобы вы могли видеть, как она работает.

Answer 2

Как говорит BSMP, похоже, что chrome не очень хорошо работает, когда вы добавляете классы столбцов в таблицы. Поэтому я просто использовал немного пользовательских css вместо:

.w5 {
    width: 5%;
}
.w10 {
    width: 10%;
}
.w15 {
    width: 15%;
}
.w20 {
    width: 20%;
}
.w25 {
    width: 25%;
}
.w30 {
    width: 30%;
}

Answer 3

В вашем коде есть некоторые изменения, вы забыли добавить row class и col-md-1 или col-sm-1 et c в вашем столбце замените ваш код следующим кодом

<div class="row">
      <div class="col">
         <table class="table">
            <thead>
               <tr class="row">
                  <th class="col-md-1 text-center"><input class="form-check-input position-static" type="checkbox"
                        id="checkAll" value="option1"></th>
                  <th class="col-md-2"><a class="text-body"
                        href="?page={{ contacts.number }}&order_by=displayName">Name</a></th>
                  <th class="col-md-3 d-none d-lg-table-cell"><a class="text-body"
                        href="?page={{ contacts.number }}&order_by=companyName">Organisation</a></th>
                  <th class="col-md-3 d-none d-lg-table-cell"><a class="text-body"
                        href="?page={{ contacts.number }}&order_by=jobTitle">Job Title</a></th>
                  <th class="col-md-1 d-none d-md-table-cell"><a class="text-body"
                        href="?page={{ contacts.number }}&order_by=profession">NSO</a></th>
                  <th class="col-md-1 d-none d-lg-table-cell"><a class="text-body"
                        href="?page={{ contacts.number }}&order_by=lastModifiedDateTime">Last Updated</a></th>
                  <th class="col-md-1">Profile</th>
               </tr>
            </thead>
            <tbody>
               {% if contacts %}
               {% for contact in contacts %}
               <tr class="row">
                  <td class="col-md-1 text-center"><input class="form-check-input position-static" type="checkbox"
                        id="blankCheckbox" name='selected_contact' value={{ contact.per_contact_id }}></td>
                  <td class="col-md-2"><a href="mailto:?bcc={{ contact.emailAddresses.0.address }}"
                        class="text-primary">{{ contact.displayName }}</a></td>
                  <td class="col-md-3 d-none d-lg-table-cell">{{ contact.companyName }}</td>
                  <td class="col-md-3 d-none d-lg-table-cell">{{ contact.jobTitle }}</td>
                  <td class="col-md-1 d-none d-md-table-cell">{{ contact.profession }}</a></td>
                  <td class="col-md-1 d-none d-lg-table-cell">{{ contact.modified }}</td>
                  <td class="col-md-1"><button name="submit_button" type="submit"
                        class="btn btn-link text-success noline" value={{ contact.per_contact_id }}>View</button></td>
               </tr>
               {% endfor %}
               {% endif %}
            </tbody>
         </table>
      </div>
   </div>

, если он работа дай мне знать