I'm not a professional web designer. I attempted to create a web layout with scrollable columns containing data in anchor tags that are loaded dynamically. To achieve this, I created an HTML table structure along with a stylesheet. Here is the source code for the table:
<table>
<tr>
<!--COLUMN HEADERS -->
<td id="titles" style="width: 50%">
<b style="padding-left: 4%">CURRENCY</b>
<b style="padding-left: 9%">COUNTRY</b>
<b style="padding-left: 8%">SECTOR</b>
<b style="padding-left: 4%">LOCATION COUNT</b>
</td>
</tr>
<tr>
<td style="width: 50%">
<div id="column">
<div ng-repeat="currency in allCurrencies">
<a href=""
ng-click="filterProductByCurrency(currency); filterCountryByCurrency(currency); filterSectorByCurrency(currency)">
<span ng-bind="currency"></span> <br>
</a>
<input type="hidden" name="currencyHolder" ng-model="selCurrency">
</div>
</div>
<div id="column">
<div ng-repeat="country in allCountries">
<a href=""
ng-click="filterProductByCountry(country); filterSectorByCurrAndCtry(country)">
<span ng-bind="country"></span> <br>
</a>
<input type="hidden" name="countryHolder" ng-model="selCountry">
</div>
</div>
<div id="column">
<div ng-repeat="sector in allSectors">
<a href="" ng-click="filterProductBySectors(sector); filterLocBySectors(sector)"> <span
ng-bind="sector"></span> <br>
</a>
<input type="hidden" name="variantHolder" ng-model="selVariant">
</div>
</div>
<div id="column">
<div ng-repeat="locCount in locationRangeValues">
<a href="" ng-click="filterProductByRange(locCount)">
<span ng-bind="locCount"></span> <br>
</a>
</div>
</div>
</td>
</tr>
</table>
The CSS styling for the column class is as follows:
#column {
background-color: #f5f5f5;
float: left;
width: 14%;
height: 125px;
overflow: auto;
overflow-y: scroll;
white-space: nowrap;
text-align: center;
}
For the titles class, the CSS styling is:
#titles{
background-color: #f5f5f5;
color: #069;
fill: #069;
}
Although this setup works well, it lacks responsiveness. I have integrated Bootstrap into my application. Is there a way to make this layout more responsive using Bootstrap? Any assistance would be greatly appreciated.