Containing larger texts in table row

Question

Im trying to figure out how to contain a row within grid column when the contents are very large. The row in question consists of URL that can be quite long.

I have two columns in a bootstrap grid system. If a row in the left column table is very long then the right column is shrunken. And if the left column is very large then the grid columns pile horizontally and the long row in question stretches out of the website borders.

Is there some way to contain such long rows? I tried the approach answered in https://stackoverflow.com/a/18498071 but it didnt have any effect.

Here is my code. Im using jinja templating to populate the second column with some dummy data:

<div class="container">
            <div class="col">
                <h6 class="text-center">HEADING</h6>
                <div class="form-row">

                    <div class="col">
                        <ul class="list-group list-group-horizontal">
                            <li class="list-group-item flex-fill">TEXT</li>
                            <li class="list-group-item flex-fill">TEXT</li>
                            <li class="list-group-item flex-fill">TEXT</li>
                            <li class="list-group-item flex-fill">TEXT</li>
                        </ul>
                    </div>

                </div>
                <br>
                    <div class="row">
                        <div class="col">
                            <table class="table table-stripped table-sm">
                                <thead>
                                    <tr>
                                        <th scope="col">Colums</th>
                                        <th scope="col">Column2</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>http://amazon.com</td>
                                        <td>75</td>
                                    </tr>
                                    <tr>
                                        <td>www.website.com/somedomain</td>
                                        <td>90</td>
                                    </tr>
                                    <tr>
                                        <td>www.anotherwebsite.comttttttttttttttttttttt0000000000000000000000000000000000000000000000000000000000tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</td>
                                        <td>98</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                            <div class="col">

                            <table class="table table-stripped table-sm">
                                <thead>
                                <tr>
                                    <th scope="col">Some URLs</th>
                                </tr>
                                </thead>
                                {% for data in dummy_data %}
                                <tbody>
                                <tr>
                                    <td>{{data}}</td>
                                </tr>
                                </tbody>
                                {% endfor %}
                            </table>

                        </div>

                    </div>

            </div>
    </div>

Answer 1

You can use ellipsis and max-width to contain the long data elements. Ellipsis

<!-- you can use max-width and ellipsis to contain your long data elements-->
<style>
  .col1-width {
    max-width: 400px;
  }

  .col2-width {
    width: 50px;
    text-align: center;
  }

  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<div class="container">
  <div class="col">
    <h6 class="text-center">HEADING</h6>
    <div class="form-row">

      <div class="col">
        <ul class="list-group list-group-horizontal">
          <li class="list-group-item flex-fill">TEXT</li>
          <li class="list-group-item flex-fill">TEXT</li>
          <li class="list-group-item flex-fill">TEXT</li>
          <li class="list-group-item flex-fill">TEXT</li>
        </ul>
      </div>

    </div>
    <br>
    <div class="row">
      <div class="col">
        <table class="table table-stripped table-sm">
          <thead>
            <tr>
              <th scope="col">Colums</th>
              <th scope="col">Column2</th>
            </tr>
          </thead>
          <tbody style="width:500px;">
            <tr>
              <td class="
            ellipsis
            col1-width">http://amazon.com</td>
              <td class="col2-width">75</td>
            </tr>
            <tr>
              <td class="ellipsis col1-width">www.website.com/somedomain</td>
              <td class="col2-width">90</td>
            </tr>
            <tr>
              <td
                class="ellipsis col1-width"
                title="www.anotherwebsite.comttttttttttttttttttttt0000000000000000000000000000000000000000000000000000000000tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
              >
                <!-- ellipsis each first td to truncate the data -->
                www.anotherwebsite.comttttttttttttttttttttt0000000000000000000000000000000000000000000000000000000000tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
              </td>
              <td class="col2-width">98</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col">

        <table class="table table-stripped table-sm">
          <thead>
            <tr>
              <th scope="col">Some URLs</th>
            </tr>
          </thead>
          {% for data in dummy_data %}
          <tbody>
            <tr>
              <td>{{data}}</td>
            </tr>
          </tbody>
          {% endfor %}
        </table>

      </div>

    </div>

  </div>
</div>