When creating a table with some content, I encountered an issue where long strings would extend beyond the window. I attempted to set max-width: 80%; to limit the length, and also tried setting td, th = width: 240px;, but the problem persisted.
Next, I experimented with adding word-wrap: break-word;, however this did not solve the issue either.
.tableTheme {
background: #0d5dd4;
color: white;
}
.tableWidth {
max-width: 80%;
}
.tableWidth td,
th {
width: 240px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row justify-content-center">
<div class="tableWidth">
<table class="table table-bordered">
<thead class="tableTheme">
<tr>
<th scope="col">Test Suite Collection ID</th>
<th scope="col">Test Suite Collection Name</th>
<th scope="col">Test Suite ID</th>
<th scope="col">Test Suite Name</th>
<th scope="col">Test Case ID</th>
<th scope="col">Test Case Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>TSC</td>
<td>2</td>
<td>TS</td>
<td>3</td>
<td>TC</td>
</tr>
<tr>
<td>1</td>
<td>WHEN_I_HAVE_A_VERY_LONG_STRING_IT_DOESN'T_FIT_ONE_WINDW_ANYMORE_WHEN_I_HAVE_A_VERY_LONG_STRING_IT_DOESN'T_FIT_ONE_WINDW_ANYMORE_WHEN_I_HAVE_A_VERY_LONG_STRING_IT_DOESN'T_FIT_ONE_WINDW_ANYMORE</td>
<td>2</td>
<td>TS</td>
<td>3</td>
<td>TC</td>
</tr>
</tbody>
</table>
</div>
</div>