Bootstrap table cell 宽度调整

https://mdbootstrap.com/snippets/jquery/ascensus/135599#html-tab-view

根据内容变更

Table columns with text-nowrap

With class .text-nowrap you can specific how white-space inside an table is handled.

Sequences of white space are preserved. Lines are broken at newline characters, at br, and as necessary to fill line boxes.

If you want use a .text-nowrap you have to use div wrapper with .table-responsive class because your table will be broken on small on small screens.

For example here is table with text-nowrap class:

 

 

<div class="table-responsive text-nowrap">
        <!--Table-->
        <table class="table table-striped">

          <!--Table head-->
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Surname</th>
              <th>Country</th>
              <th>City</th>
              <th>Position</th>
              <th>Age</th>
            </tr>
          </thead>
          <!--Table head-->

          <!--Table body-->
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Kate</td>
              <td>Moss</td>
              <td>USA / The United Kingdom / China / Russia </td>
              <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
              <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
              <td>23</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Anna</td>
              <td>Wintour</td>
              <td>USA / The United Kingdom / China / Russia </td>
              <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
              <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
              <td>36</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Tom</td>
              <td>Bond</td>
              <td>USA / The United Kingdom / China / Russia </td>
              <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
              <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
              <td>25</td>
            </tr>
            <tr>
              <th scope="row">4</th>
              <td>Jerry</td>
              <td>Horwitz</td>
              <td>USA / The United Kingdom / China / Russia </td>
              <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
              <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
              <td>41</td>
            </tr>
            <tr>
              <th scope="row">5</th>
              <td>Janis</td>
              <td>Joplin</td>
              <td>USA / The United Kingdom / China / Russia </td>
              <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
              <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
              <td>39</td>
            </tr>
            <tr>
              <th scope="row">6</th>
              <td>Gary</td>
              <td>Winogrand</td>
              <td>USA / The United Kingdom / China / Russia </td>
              <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
              <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
              <td>37</td>
            </tr>
            <tr>
              <th scope="row">7</th>
              <td>Angie</td>
              <td>Smith</td>
              <td>USA / The United Kingdom / China / Russia </td>
              <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
              <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
              <td>52</td>
            </tr>
            <tr>
              <th scope="row">8</th>
              <td>John</td>
              <td>Mattis</td>
              <td>USA / The United Kingdom / China / Russia </td>
              <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
              <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
              <td>28</td>
            </tr>
            <tr>
              <th scope="row">9</th>
              <td>Otto</td>
              <td>Morris</td>
              <td>USA / The United Kingdom / China / Russia </td>
              <td>New York City / Warsaw / Lodz / Amsterdam / London / Chicago</td>
              <td>Web Designer /UX designer / Ul designer / JavaScript Developer</td>
              <td>35</td>
            </tr>
          </tbody>
          <!--Table body-->


        </table>
        <!--Table-->
      </div>