DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

DataTables uses space for nowrap while I have wrapping text

DataTables uses space for nowrap while I have wrapping text

vmvelevvmvelev Posts: 2Questions: 1Answers: 0
edited January 2021 in Free community support

Link to test case: https://codepen.io/vmvelev/pen/ExgRGVp

Hi Guys,

I have 3 tables on one row on my webpage and I am trying to add DataTables, but when I initialize it, the tables start using space as if there was the nowrap class used. I am not intending to use the nowrap, as some cells might contain a lot of text, and I would also like to keep my tables on the same row, but it is always changing their size from col-3 to col-12 or something else, depending on the text in the cell.

How can I avoid this?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,214Questions: 1Answers: 10,415 Site admin
    Answer ✓

    Oddly CodePen isn’t allowing me to save changes there. But don’t use col-3 on the table element - put a wrapper div around it - e.g.

    <body>
  <div class="container">
    <div class="row justify-content-around">
      <div class="col-3">
      <table id="table1" class="table table-sm table-hover">
        <thead>
          <tr>
            <th class="text-center" scope="col">ID</th>
            <th class="text-center" scope="col">Subject</th>
            <th class="text-center" scope="col">Assign</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="align-middle">123456</td>
            <td class="align-middle">Some long text for a subject as I want to use wrapping text</td>
            <td class="align-middle"><a href="#" class="btn btn-primary btn-sm mt-auto">Assign</a></td>
          </tr>
        </tbody>
      </table>
      </div>
      <div class="col-3">
      <table id="table2" class="table table-sm table-hover">
        <thead>
          <tr>
            <th class="text-center" scope="col">ID</th>
            <th class="text-center" scope="col">Subject</th>
            <th class="text-center" scope="col">Assign</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="align-middle">345678</td>
            <td class="align-middle">Some long text for a subject as I want to use wrapping text</td>
            <td class="align-middle"><a href="#" class="btn btn-primary btn-sm mt-auto">Assign</a></td>
          </tr>
        </tbody>
      </table>
      </div>
      <div class="col-3">
      <table id="table3" class="table table-sm table-hover">
        <thead>
          <tr>
            <th class="text-center" scope="col">ID</th>
            <th class="text-center" scope="col">Subject</th>
            <th class="text-center" scope="col">Assign</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="align-middle">234567</td>
            <td class="align-middle">Some long text for a subject as I want to use wrapping text</td>
            <td class="align-middle"><a href="#" class="btn btn-primary btn-sm mt-auto">Assign</a></td>
          </tr>
        </tbody>
      </table>
      </div>
    </div>
  </div>
</body>

    Allan

  • vmvelevvmvelev Posts: 2Questions: 1Answers: 0

    Awesome! Thank you very much @allan!

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.