Bootstrap table-responsive 不会占用 100% 宽度的解决办法 – 珊瑚贝

我想利用 Bootstrap 的表格响应类 .table-responsive 来允许在移动设备上水平滚动表格。在桌面设备上，表格应占包含表格的 DIV 宽度的 100%。 但是一旦我将 .table-responsive 类应用于我的表格，表格就会水平收缩并且不再占据 100% 的宽度。

<div class="card-body">
	<table class="table table-responsive">
		<thead>
			<tr>
				<th style="width:30%">报名项目</th>
				<th>类型</th>
				<th class="text-center">单价</th>
				<th class="text-center">报名人数</th>
				<th class="text-center">小计</th>
				<th class="text-center">订单总价</th>
				<th class="text-center">状态</th>
				<th class="text-center">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
			</tr>
		</tbody>
	</table>
</div>

如果我对 table 应用 100% 的宽度，它会使表格本身为 100% 的宽度，但子元素（TBODY、TR 等）仍然很窄。

<div class="card-body">
	<table class="table table-responsive w-100">
		<thead>
			<tr>
				<th style="width:30%">报名项目</th>
				<th>类型</th>
				<th class="text-center">单价</th>
				<th class="text-center">报名人数</th>
				<th class="text-center">小计</th>
				<th class="text-center">订单总价</th>
				<th class="text-center">状态</th>
				<th class="text-center">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
			</tr>
		</tbody>
	</table>
</div>

最好的解决办法是将 .table-responsive 响应类应用到包裹 table 的容器上：

<div class="card-body table-responsive">
	<table class="table">
		<thead>
			<tr>
				<th style="width:30%">报名项目</th>
				<th>类型</th>
				<th class="text-center">单价</th>
				<th class="text-center">报名人数</th>
				<th class="text-center">小计</th>
				<th class="text-center">订单总价</th>
				<th class="text-center">状态</th>
				<th class="text-center">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
			</tr>
		</tbody>
	</table>
</div>