- 1 year ago
Trying to make a dynamically populated row display on one row with horizontal scroll bootstrap 5 .net
Comment
1 / 1
To display a dynamically populated row on one row with horizontal scroll in Bootstrap 5 and .NET, you can follow these steps:
Wrap the content of the row inside a div with the class "table-responsive".
Add a table with the class "table" inside the "table-responsive" div.
Add the following styles to the "table" element:
csswidth: 100%;
white-space: nowrap;
This will make the table fill the width of its container and prevent line breaks.
Populate the table with your dynamic content.
Here's an example code snippet:
html<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<!-- Add more headers as needed -->
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<!-- Add more cells as needed -->
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
This will create a horizontally scrollable table that displays all of the dynamic content on one row.