I am trying to add horizontal scroll bar to bootstrap based table. The table looks like this:
(https://i.sstatic.net/AJb7y0O8.png)](https://i.sstatic.net/AJb7y0O8.png) 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.
Code is here:
<head>
<meta charset="utf-8" />
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
<style>
.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;
}
</style>
</head>
<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>
Kindly suggest. Thanks.