如何让Bootstrap 4响应式表格列适配内容扩大宽度？

问题根源 #

你给表格所有<th>和<td>都添加了固定百分比宽度的内联样式，这类内联样式的优先级远高于Bootstrap的类，直接强制列宽均分，导致内容多的列无法自动扩展。另外，Bootstrap的栅格col-*类是为布局容器设计的，不适用于表格单元格，所以之前尝试加col-6没用。

解决方案 #

1. 移除所有内联width样式：把所有<th>、<td>里的style="width: XX%;"代码全部删除，让表格根据内容自动分配列宽。
2. （可选）给窄列设置最小宽度：如果像Code、NLQF这类内容少的列不想被过度压缩，可以给它们的表头添加min-width样式（数值按需调整），既限制窄列宽度，又让宽列自动扩展。

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.usebootstrap.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<!-- 修改后的表格 -->
<div class="table-responsive mdb-shadow-4-strong my-5">
<table class="table table-bordered table-striped" style="border-collapse: collapse; width: 100%; border-width: 1px;" border="1">
<caption><strong>Tabel x.</strong> Sample Table Caption</caption>
<thead>
<tr>
<th scope="col" style="text-align: center; min-width: 80px; border-width: 1px;">
<p>Code</p>
</th>
<th scope="col" style="text-align: center; border-width: 1px;">Leeruitkomst</th>
<th scope="col" style="text-align: center; border-width: 1px;">Beschrijving Leeruitkomst</th>
<th scope="col" style="text-align: center; min-width: 120px; border-width: 1px;">Aantal EC's</th>
<th scope="col" style="text-align: center; min-width: 60px; border-width: 1px;">NLQF</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center; border-width: 1px;">
<p>A</p>
</td>
<td style="border-width: 1px;">
<p>Totale zorg in kaart brengen aan de hand van het verpleegkundig proces</p>
</td>
<td style="border-width: 1px;">
<p>De verpleegkundige brengt de totale zorg voor een zorgvrager zelfstandig in kaart met behulp van klinisch redeneren. Hierbij doorloopt de verpleegkundige de verschillende fasen van het verpleegkundig proces. De totale zorg vindt plaats in een authentieke leeromgeving gericht op een acute, instabiele situatie. Hierbij observeert, monitort en interpreteert de verpleegkundige de vitale functies. Bij het analyseren van de casus maakt de verpleegkundige gebruik van passende methodieken, waarbij in de analyse gebruik gemaakt wordt van medische kennis, richtlijnen, protocollen, wet- en regelgeving en Evidence-Based Practice. Vanuit deze analyse prioriteert de verpleegkundige de interventies, en houdt hierbij rekening met de persoonlijke situatie van de zorgvrager.</p>
</td>
<td style="text-align: center; border-width: 1px;">
<p>15</p>
</td>
<td style="text-align: center; border-width: 1px;">
<p>6</p>
</td>
</tr>
<tr>
<td style="text-align: center; border-width: 1px;">
<p>B</p>
</td>
<td style="border-width: 1px;">
<p>Methodisch uitvoeren van zorg en communicatie rondom het verpleegkundig proces in een gesimuleerde authentieke leeromgeving</p>
</td>
<td style="border-width: 1px;">
<p>De verpleegkundige is in staat om zelfstandig in een gesimuleerde authentieke leeromgeving, gericht op een acute, instabiele situatie methodisch te handelen en passende interventies in te zetten. Hierbij richt de verpleegkundige een veilige en efficiënte werkomgeving in en onderhoudt deze tijdens het verlenen van zorg. De verpleegkundige benadert de zorgvrager op professionele en respectvolle wijze. De verpleegkundige toont leiderschap in de communicatie en samenwerking met betrokken professionals. De verpleegkundige toont professionele verantwoordelijkheid tijdens het verpleegkundig proces en kan hier methodisch op reflecteren met aandacht voor gebruikte kennis, vaardigheden en attitude. </p>
</td>
<td style="text-align: center; border-width: 1px;">
<p>15</p>
</td>
<td style="text-align: center; border-width: 1px;">
<p>6</p>
</td>
</tr>
</tbody>
</table>
</div>

效果说明 #

修改后，内容量大的列会自动扩展宽度以展示完整内容，内容少的列保持紧凑；添加的min-width样式能避免窄列被压缩到难以阅读的宽度。

内容的提问来源于stack exchange，提问作者Hagelslag