it-swarm.com.ru

Как установить размер столбца в адаптивной таблице Bootstrap

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

Я использую 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>
30
Brendan Vogt

Bootstrap 4.0

Помните обо всех миграциях изменениях с Bootstrap 3 на 4. В таблице вам теперь нужно включить flex box, добавив класс 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>

bootply

Bootstrap 3.2

Таблица ширина столбца использовать тот же макет, что и сетки do; используя 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-*).

77
Jordan.J.D

Вы можете использовать встроенные стили и определять ширину в теге <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>

Bootply demo

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

17
Dan

вы можете использовать следующий класс Bootstrap с 

<tr class="w-25">

</tr>

для получения более подробной информации посетите следующую страницу https://getbootstrap.com/docs/4.1/utilities/sizing/

0
dev