How to keep text WITHIN div's HTML/Bootstrap - html

Question

So my text is "falling" out of my page at certain sizes, how do I stop this?
I have Googled and tried many things to no avail.
If you check out my screenshot u can see what I mean, and the code that is the victim of this is below as well.
Thanks in advance!
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<div class="container">
<div class="shadow p-3 mb-5 bg-white rounded">
<table class="table">
<thead>
<tr>
<th scope="col" >CRN</th>
<th scope="col">Subject</th>
<th scope="col">Course</th>
<th scope="col">Credits</th>
<th scope="col">Title</th>
<th scope="col">Days</th>
<th scope="col">Times</th>
<th scope="col">Instructor</th>
<th scope="col">Attribute</th>
<th scope="col">Professor Difficulty</th>
<th scope="col">Professor Rating</th>
<th scope="col">Would Take Again</th>
</tr>
</thead>
<tbody>
{% for row in all_data %}
<tr>
<th>{{row['crn']}}</th>
<td><strong>{{row['subj']}}</strong></td>
<td >{{row['crse']}}</td>
<td>{{row['cred']}}</td>
<td>{{row['title']}}</td>
<td>{{row['days']}}</td>
<td>{{row['time']}}</td>
<td>{{row['instr']}}</td>
<td>{{row['Attr']}}</td>
<td data-bs-toggle="tooltip" data-bs-placement="top" title="Information Taken From RateMyProfessor">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: {{row['profDiff']}}%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{row['profDiff']}}%
</div>
</div>
</td>
<td data-bs-toggle="tooltip" data-bs-placement="top" title="Information Taken From RateMyProfessor">{{row['profRating']}}</td>
<td data-bs-toggle="tooltip" data-bs-placement="top" title="Information Taken From RateMyProfessor">{{row['profWouldTakeAgain']}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</body>

Answer 1

One way is to use overflow: scroll on the problematic div, so that it becomes scrollable:
.container > div {
overflow: scroll;
background-color: #fff;
}
body {
background-color: pink;
}
<div class="container">
<div class="shadow p-3 mb-5 bg-white rounded">
<table class="table">
<thead>
<tr>
<th scope="col" >CRN</th>
<th scope="col">Subject</th>
<th scope="col">Course</th>
<th scope="col">Credits</th>
<th scope="col">Title</th>
<th scope="col">Days</th>
<th scope="col">Times</th>
<th scope="col">Instructor</th>
<th scope="col">Attribute</th>
<th scope="col">Professor Difficulty</th>
<th scope="col">Professor Rating</th>
<th scope="col">Would Take Again</th>
</tr>
</thead>
<tbody>
{% for row in all_data %}
<tr>
<th>{{row['crn']}}</th>
<td><strong>{{row['subj']}}</strong></td>
<td >{{row['crse']}}</td>
<td>{{row['cred']}}</td>
<td>{{row['title']}}</td>
<td>{{row['days']}}</td>
<td>{{row['time']}}</td>
<td>{{row['instr']}}</td>
<td>{{row['Attr']}}</td>
<td data-bs-toggle="tooltip" data-bs-placement="top" title="Information Taken From RateMyProfessor"> <div class="progress">
<div class="progress-bar" role="progressbar" style="width: {{row['profDiff']}}%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{row['profDiff']}}%</div>
</div>
</td>
<td data-bs-toggle="tooltip" data-bs-placement="top" title="Information Taken From RateMyProfessor">{{row['profRating']}}</td>
<td data-bs-toggle="tooltip" data-bs-placement="top" title="Information Taken From RateMyProfessor">{{row['profWouldTakeAgain']}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</body>
Alternatively, you can use some Javascript to check the current screen width, and then resize content appropriately using CSS's transform: scale(). In the example below I used jQuery for brevity, but this can sure be done using plain JS. Two things to note here:
The content should resize as the browser window is resized;
When using transform: scale, it is best to also set the transform-origin of the div to top-left so that the div does not "move around" as it is scaled.
$(document).ready(function() {
resizeTable();
});
$(window).on("resize", function() {
resizeTable();
});
function resizeTable() {
var width = $(document).width();
// if width / 1500 is greater than 1, set scale to 1
// (i.e. do not zoom in stuff if the screen is very large)
// here 1500 is only an example, you can set the number to whatever you see fit
scale = Math.min(width / 1500, 1);
$(".container table").css("transform", `scale(${scale})`);
}
.container > div {
overflow: scroll;
background-color: #fff;
}
.container table {
transform-origin: left top;
}
body {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="shadow p-3 mb-5 bg-white rounded">
<table class="table">
<thead>
<tr>
<th scope="col" >CRN</th>
<th scope="col">Subject</th>
<th scope="col">Course</th>
<th scope="col">Credits</th>
<th scope="col">Title</th>
<th scope="col">Days</th>
<th scope="col">Times</th>
<th scope="col">Instructor</th>
<th scope="col">Attribute</th>
<th scope="col">Professor Difficulty</th>
<th scope="col">Professor Rating</th>
<th scope="col">Would Take Again</th>
</tr>
</thead>
<tbody>
{% for row in all_data %}
<tr>
<th>{{row['crn']}}</th>
<td><strong>{{row['subj']}}</strong></td>
<td >{{row['crse']}}</td>
<td>{{row['cred']}}</td>
<td>{{row['title']}}</td>
<td>{{row['days']}}</td>
<td>{{row['time']}}</td>
<td>{{row['instr']}}</td>
<td>{{row['Attr']}}</td>
<td data-bs-toggle="tooltip" data-bs-placement="top" title="Information Taken From RateMyProfessor"> <div class="progress">
<div class="progress-bar" role="progressbar" style="width: {{row['profDiff']}}%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{row['profDiff']}}%</div>
</div>
</td>
<td data-bs-toggle="tooltip" data-bs-placement="top" title="Information Taken From RateMyProfessor">{{row['profRating']}}</td>
<td data-bs-toggle="tooltip" data-bs-placement="top" title="Information Taken From RateMyProfessor">{{row['profWouldTakeAgain']}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</body>
However, this second approach is not optimal for very small screens, e.g. mobile phones, as text will become way too small to read. So, such small screens should ideally be handled separately using CSS media queries.