Как установить размер столбца в таблице ответов 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>
Ответы
Ответ 1
Table ширина столбца использует тот же макет, что и сетки; используя 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-*).
Ответ 2
Вы можете использовать встроенные стили и определить ширину в теге <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>
Обычно использование встроенных стилей не является идеальным, однако это обеспечивает гибкость, потому что вы можете получить очень конкретную и гранулированную с точной шириной.
