使用Bootstrap 4响应式表格的列,以更有效地显示内容,即增加宽度。

huangapple go评论63阅读模式
英文:

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

问题

我使用Bootstrap 4的响应式表格来显示一些表格数据。然而,一些数据单元包含了相当多的信息(例如,一些长句子),包含这些信息的列保持相当窄,而不是扩展以更有效地显示信息,如图1所示使用Bootstrap 4响应式表格的列,以更有效地显示内容,即增加宽度。

我在Stackoverflow上查找了,但没有真正找到解决方案。我尝试使用一些col类(col-6)来增加包含大量信息的列的宽度。但这也没有起作用。看起来列的宽度都是相等的,不会根据数据单元的内容进行调整。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->
    <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"/>

    <!-- 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>表格 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 -->

<!-- end snippet -->

我是否遗漏了一些非常明显的东西?是否有一些我可以应用的Bootstrap 4类?

英文:

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响应式表格的列,以更有效地显示内容,即增加宽度。.

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;https://cdn.usebootstrap.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;

&lt;!-- start table --&gt;
&lt;div class=&quot;table-responsive mdb-shadow-4-strong my-5&quot;&gt;
&lt;table class=&quot;table table-bordered table-striped&quot; style=&quot;border-collapse: collapse; width: 100%; border-width: 1px;&quot; border=&quot;1&quot;&gt;&lt;caption&gt;&lt;strong&gt;Tabel x.&lt;/strong&gt; Sample Table Caption&lt;/caption&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th scope=&quot;col&quot; style=&quot;text-align: center; width: 18.941%; border-width: 1px;&quot;&gt;
&lt;p&gt;Code&lt;/p&gt;
&lt;/th&gt;
&lt;th scope=&quot;col&quot; style=&quot;text-align: center; width: 18.941%; border-width: 1px;&quot;&gt;Leeruitkomst&lt;/th&gt;
&lt;th scope=&quot;col&quot; style=&quot;text-align: center; width: 29.8106%; border-width: 1px;&quot;&gt;Beschrijving Leeruitkomst&lt;/th&gt;
&lt;th scope=&quot;col&quot; style=&quot;text-align: center; width: 32.2128%; border-width: 1px;&quot;&gt;Aantal EC&#39;s&lt;/th&gt;
&lt;th scope=&quot;col&quot; style=&quot;text-align: center; width: 4.37778%; border-width: 1px;&quot;&gt;NLQF&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style=&quot;text-align: center; width: 18.941%; border-width: 1px;&quot;&gt;
&lt;p&gt;A&lt;/p&gt;
&lt;/td&gt;
&lt;td style=&quot;width: 18.941%; border-width: 1px;&quot;&gt;
&lt;p&gt;Totale zorg in kaart brengen aan de hand van het verpleegkundig proces&lt;/p&gt;
&lt;/td&gt;
&lt;td style=&quot;width: 29.8106%; border-width: 1px;&quot;&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/td&gt;
&lt;td style=&quot;text-align: center; width: 32.2128%; border-width: 1px;&quot;&gt;
&lt;p&gt;15&lt;/p&gt;
&lt;/td&gt;
&lt;td style=&quot;text-align: center; width: 4.37778%; border-width: 1px;&quot;&gt;
&lt;p&gt;6&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;text-align: center; width: 18.941%; border-width: 1px;&quot;&gt;
&lt;p&gt;B&lt;/p&gt;
&lt;/td&gt;
&lt;td style=&quot;width: 18.941%; border-width: 1px;&quot;&gt;
&lt;p&gt;Methodisch uitvoeren van zorg en communicatie rondom het verpleegkundig proces in een gesimuleerde authentieke leeromgeving&lt;/p&gt;
&lt;/td&gt;
&lt;td style=&quot;width: 29.8106%; border-width: 1px;&quot;&gt;
&lt;p&gt;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&#235;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. &lt;/p&gt;
&lt;/td&gt;
&lt;td style=&quot;text-align: center; width: 32.2128%; border-width: 1px;&quot;&gt;
&lt;p&gt;15&lt;/p&gt;
&lt;/td&gt;
&lt;td style=&quot;text-align: center; width: 4.37778%; border-width: 1px;&quot;&gt;
&lt;p&gt;6&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;!-- end table --&gt;

<!-- end snippet -->

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

答案1

得分: 1

我删除了您所有的内联样式<th style="...">,我认为默认的布局已经相当漂亮并且满足您的要求,不是吗?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->
    <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" />

    <!-- 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 -->

<!-- end snippet -->
英文:

I remove all your inline styling &lt;th style=&quot;...&quot;&gt; and I think the default layout already quite pretty and fulfill what you want isn't it ?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;https://cdn.usebootstrap.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;!-- start table --&gt;
&lt;div class=&quot;table-responsive mdb-shadow-4-strong my-5&quot;&gt;
&lt;table class=&quot;table table-bordered table-striped&quot;&gt;
&lt;caption&gt;&lt;strong&gt;Tabel x.&lt;/strong&gt; Sample Table Caption&lt;/caption&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th scope=&quot;col&quot;&gt;
&lt;p&gt;Code&lt;/p&gt;
&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;Leeruitkomst&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;Beschrijving Leeruitkomst&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;Aantal EC&#39;s&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;NLQF&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;p&gt;A&lt;/p&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;p&gt;Totale zorg in kaart brengen aan de hand van het verpleegkundig proces&lt;/p&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;p&gt;15&lt;/p&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;p&gt;6&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;p&gt;B&lt;/p&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;p&gt;Methodisch uitvoeren van zorg en communicatie rondom het verpleegkundig proces in een gesimuleerde authentieke leeromgeving&lt;/p&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;p&gt;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&#235;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. &lt;/p&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;p&gt;15&lt;/p&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;p&gt;6&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;!-- end table --&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月16日 19:14:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/75471453.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定