Як встановити розмір стовпця в адаптивній таблиці Bootstrap

Як встановити розмір стовпця в адаптивній таблиці Bootstrap? Я не хочу, щоб таблиця втратила свої функції, що відповідають умовам. Мені це потрібно для роботи в IE8. Я включив HTML5SHIV та Respond.

Я використовую Bootstrap 3 (3.2.0)

<div class="table-responsive">
    <table id="productSizes" class="table">
        <thead>
            <tr>
                <th>Size</th>
                <th>Bust</th>
                <th>Waist</th>
                <th>Hips</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>6</td>
                <td>79 - 81</td>
                <td>61 - 63</td>
                <td>89 - 91</td>
            </tr>
            <tr>
                <td>8</td>
                <td>84 - 86</td>
                <td>66 - 68</td>
                <td>94 - 96</td>
            </tr>
        </tbody>
    </table>
</div>

Bootstrap 4.0

Будьте в курсі всіх змін міграції з Bootstrap 3 на 4. У таблиці тепер потрібно ввімкнути поле flex, додавши клас d-flex, і відпустіть, xsщоб bootstrap автоматично визначав область перегляду.

<div class="container-fluid">
    <table id="productSizes" class="table">
        <thead>
            <tr class="d-flex">
                <th class="col-1">Size</th>
                <th class="col-3">Bust</th>
                <th class="col-3">Waist</th>
                <th class="col-5">Hips</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-1">6</td>
                <td class="col-3">79 - 81</td>
                <td class="col-3">61 - 63</td>
                <td class="col-5">89 - 91</td>
            </tr>
            <tr class="d-flex">
                <td class="col-1">8</td>
                <td class="col-3">84 - 86</td>
                <td class="col-3">66 - 68</td>
                <td class="col-5">94 - 96</td>
            </tr>
        </tbody>
    </table>

завантажувальний

Бутстрап 3.2

Ширина стовпця таблиці використовує той самий макет, що і сітки ; використання col-[viewport]-[size]. Пам'ятайте, що розміри колонок повинні складати 12; 1 + 3 + 3 + 5 = 12у цьому прикладі.

        <thead>
            <tr>
                <th class="col-xs-1">Size</th>
                <th class="col-xs-3">Bust</th>
                <th class="col-xs-3">Waist</th>
                <th class="col-xs-5">Hips</th>
            </tr>
        </thead>

Не забувайте встановлювати <th>елементи, а не <td>елементи, щоб він встановлював весь стовпець. Ось робочий BOOTPLY .

Дякуємо @Dan за нагадування, що я завжди повинен спочатку працювати на мобільному режимі ( col-xs-*).

Ви можете використовувати вбудовані стилі та визначити ширину <th>тегу. Зробіть так, щоб сума ширини = 100%.

    <tr>
        <th style="width:10%">Size</th>
        <th style="width:30%">Bust</th>
        <th style="width:50%">Waist</th>
        <th style="width:10%">Hips</th>
    </tr>

Демонстраційне завантаження

Зазвичай використання вбудованих стилів не є ідеальним, однак це забезпечує гнучкість, оскільки ви можете отримати дуже конкретні та детальні з точною шириною.

Ви можете використовувати наступний клас Bootstrap за допомогою

<tr class="w-25">

</tr>

для отримання додаткової інформації перегляньте наступну сторінку https://getbootstrap.com/docs/4.1/utilities/sizing/