Add horizontal scroll and align columns in Bootstrap table

Question

I am trying to add a horizontal scroll bar to a Bootstrap based table. The table looks like this:

If there is large data in Remaining candidates (Ex: Wolfeschlegelsteinhausenbergerdorfflastname, Wolfeschlegelsteinhausenbergerdorffffirstname), then the table should have a horizontal scroll and header and footer should also align. Total count footer should align with Excl 3 total and Overall % total.

.align-items-center {
  align-items: center !important;
}

.total-count-row {
  background-color: #ebebeb;
  line-height: 1.5rem;
}

.table-data-column {
  padding: 8px !important;
  align-content: center;
}

.table-header-column,
.table-data-column {
  border-bottom: 2px solid #ebebeb;
}

.align-items-end {
  align-items: flex-end !important;
}

.body-md-bold {
  color: #1a1a1a;
  font: 700 16px / 24px 'Open Sans' !important;
}

.exclusion-header-column {
  padding-top: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-left: 12px;
  border-bottom: 2px solid #6E267B;
}

.exclusion-candidate-column {
  display: flex;
  padding: var(0.75rem, 0.75rem) var(0.5rem, 0.5rem);
  align-items: center;
  gap: var(0.5rem, 0.5rem);
  align-self: stretch;
  border-right: 1px solid #EBEBEB;
  border-bottom: 1px solid #EBEBEB;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>


<body>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="container-fluid exclusion-header-column">
          <div class="row align-items-end">
            <div class="col-3">
              <span class="body-md-bold">Excluded candidate</span>
            </div>
            <div class="col-1">
              <span class="d-flex justify-content-end body-md-bold text-right">Votes to <br />transfer</span>
            </div>
            <div class="col-8">
              <div class="row align-items-end">
                <div class="col">
                  <span class="body-md-bold">Remaining candidates</span>
                </div>
                <div class="col col-width-1">
                  <span class="d-flex justify-content-end body-md-bold text-right">First pref<br /> total</span>

                </div>
                <div class="col col-width-1">
                  <span class="d-flex justify-content-end body-md-bold text-right">Transfer <br />votes</span>
                </div>
                <div class="col col-width-1">
                  <span class="d-flex justify-content-end body-md-bold text-right">Transfer % total</span>
                </div>
                <div class="col col-width-1">
                  <span class="d-flex justify-content-end body-md-bold text-right">Excl 1 <br />total</span>
                </div>
                <div class="col col-width-1">
                  <span class="body-md-bold text-right d-flex justify-content-end">Overall % total</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="container-fluid">
          <div class="row align-items-center">
            <div class="col-3 exclusion-candidate-column">
              <div>
                <div class="exclusion-candidate-name">
                  <span class="text-uppercase">Suresh Yadav</span>
                </div>
                <div class="text-uppercase exclusion-candidate-party">

                </div>
              </div>
            </div>
            <div class="col-1 exclusion-candidate-column exclusion-highlighted-column justify-content-end">
              <span class="exclusion-count-bold">
                                200
                            </span>
            </div>
            <div class="col-8">

              <div class="row align-items-center">
                <div class="col exclusion-data-column">
                  <div class="exclusion-candidate-name">
                    <span class="text-uppercase">Amit Jain</span>
                  </div>
                </div>
                <div class="col col-width-1 exclusion-data-column">
                  <span class="d-flex justify-content-end text-right exclusion-previous-count">
                                        200
                                    </span>
                </div>
                <div class="col col-width-1 exclusion-data-column exclusion-highlighted-column">
                  <span class="d-flex justify-content-end text-right exclusion-count-bold">
                                        55
                                    </span>
                </div>
                <div class="col col-width-1 exclusion-data-column exclusion-highlighted-column">
                  <span class="body-md-reg d-flex justify-content-center">
                                        45%
                                    </span>
                </div>
                <div class="col col-width-1 exclusion-data-column @remainingCandidateBackgroundClass">
                  <span class="d-flex justify-content-end text-right body-md-reg @remainingCandidateTextClass">
                                        75
                                    </span>
                </div>
                <div class="col col-width-1 exclusion-data-column @remainingCandidateBackgroundClass">
                  <span class="d-flex justify-content-end body-md-reg text-right total-count-col @remainingCandidateTextClass">
                                        35%
                                    </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="container-fluid table-data-column total-count-row">
          <div class="row align-items-center">
            <div class="col-4">
            </div>
            <div class="col-8">
              <div class="row align-items-end">
                <div class="col">
                </div>
                <div class="col col-width-1">
                </div>
                <div class="col col-width-2">
                  <span class="d-flex justify-content-end body-md-bold text-right text-uppercase">TOTAL COUNT</span>
                </div>
                <div class="col col-width-1">
                  <span class="d-flex justify-content-end body-md-bold text-right">
                                        36
                                    </span>
                </div>
                <div class="col col-width-1">
                  <span class="d-flex justify-content-end body-md-bold text-right total-count-col">
                                        75
                                    </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Make the table a table

imhvost
– imhvost

2025-04-08 20:28:18 +00:00
Commented Apr 8 at 20:28 — imhvost
– imhvost, Commented Apr 8 at 20:28

imhvost · Accepted Answer · 2025-04-08 20:54:30Z

Why are you making a <table> out of <div>? Let it be a real <table>!

.cart-table {
  width: 100%;
  td {
    white-space: nowrap;
    width: 0;
  }
  tbody {
    td {
      &:nth-child(1),
      &:nth-child(3) {
        white-space: normal;
        width: auto;
      }
    }
  }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
<div class="table-responsive">
  <table class="cart-table table">
    <thead>
      <tr>
        <td>Excluded candidate</td>
        <td>Votes to transfer</td>
        <td>Remaining candidates</td>
        <td>First pref total</td>
        <td>Transfer votes</td>
        <td>Transfer % total</td>
        <td>Excl 1 total</td>
        <td>Overall % total</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Suresh Yadav</td>
        <td>200</td>
        <td>Wolfeschlegelsteinhausenbergerdorfflastname</td>
        <td>200</td>
        <td>55</td>
        <td>45%</td>
        <td>75</td>
        <td>35%</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4"></td>
        <td colspan="2">TOTAL COUNT</td>
        <td>36</td>
        <td>75</td>
      </tr>
    </tfoot>
  </table>
</div>

Collectives™ on Stack Overflow

Add horizontal scroll and align columns in Bootstrap table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related