Search code examples
cssbootstrap-4css-tables

Make column of Bootstrap 4 responsive table display content more effectively, i.e. increase width

I use Bootstrap's 4 responsive tables to display some tabular data. However, some data cells hold quite a lot information (i.e. a couple of long sentences) The column holding this information stays quite narrow instead of expanding to more effectively display the information, as shown in image 1 Bootstrap 4 table with narrow column.

I looked in Stackoverflow, but couldn't really find a solution. I tried using some col classes (col-6) to increase the width of the column containing the large amount of information. But this didn't work also. It seems that the columns have equal width and do not adjust to the contents of the data cell.

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

<!-- start table -->
<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; width: 18.941%; border-width: 1px;">
<p>Code</p>
</th>
<th scope="col" style="text-align: center; width: 18.941%; border-width: 1px;">Leeruitkomst</th>
<th scope="col" style="text-align: center; width: 29.8106%; border-width: 1px;">Beschrijving Leeruitkomst</th>
<th scope="col" style="text-align: center; width: 32.2128%; border-width: 1px;">Aantal EC's</th>
<th scope="col" style="text-align: center; width: 4.37778%; border-width: 1px;">NLQF</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center; width: 18.941%; border-width: 1px;">
<p>A</p>
</td>
<td style="width: 18.941%; border-width: 1px;">
<p>Totale zorg in kaart brengen aan de hand van het verpleegkundig proces</p>
</td>
<td style="width: 29.8106%; 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; width: 32.2128%; border-width: 1px;">
<p>15</p>
</td>
<td style="text-align: center; width: 4.37778%; border-width: 1px;">
<p>6</p>
</td>
</tr>
<tr>
<td style="text-align: center; width: 18.941%; border-width: 1px;">
<p>B</p>
</td>
<td style="width: 18.941%; border-width: 1px;">
<p>Methodisch uitvoeren van zorg en communicatie rondom het verpleegkundig proces in een gesimuleerde authentieke leeromgeving</p>
</td>
<td style="width: 29.8106%; 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; width: 32.2128%; border-width: 1px;">
<p>15</p>
</td>
<td style="text-align: center; width: 4.37778%; border-width: 1px;">
<p>6</p>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end table -->

Am I missing something really obvious? Is there some Bootstrap 4 class that I can apply?

Solution

  • I remove all your inline styling <th style="..."> and I think the default layout already quite pretty and fulfill what you want isn't it ?

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

<!-- start table -->
<div class="table-responsive mdb-shadow-4-strong my-5">
  <table class="table table-bordered table-striped">
    <caption><strong>Tabel x.</strong> Sample Table Caption</caption>
    <thead>
      <tr>
        <th scope="col">
          <p>Code</p>
        </th>
        <th scope="col">Leeruitkomst</th>
        <th scope="col">Beschrijving Leeruitkomst</th>
        <th scope="col">Aantal EC's</th>
        <th scope="col">NLQF</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <p>A</p>
        </td>
        <td>
          <p>Totale zorg in kaart brengen aan de hand van het verpleegkundig proces</p>
        </td>
        <td>
          <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>
          <p>15</p>
        </td>
        <td>
          <p>6</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>B</p>
        </td>
        <td>
          <p>Methodisch uitvoeren van zorg en communicatie rondom het verpleegkundig proces in een gesimuleerde authentieke leeromgeving</p>
        </td>
        <td>
          <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>
          <p>15</p>
        </td>
        <td>
          <p>6</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!-- end table -->