How can I resolve the issue of form field values not being visible when selected, especially when the table fits the screen? I want the table to be scrollable and ensure that the form fields are clearly visible. This problem is particularly noticeable in the "innings pitched" section.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet"/>
<form style="width:400px" data-bind="submit: members.pitchingLogs.saveLog.bind($data, '/scores/pitchinglogs/save')">
<div class="row">
<div class="col-12 col-lg-6" data-bind="if: members.pitchingLogs.stats(), css: { hidden: !members.pitchingLogs.stats() }">
<div class="table-responsive">
<table class="table table-bordered table-striped w-100">
<thead>
<tr>
<th colspan="5" class="text-center" data-bind="text: members.pitchingLogs.stats().AwayTeam.Name">Texas Oilers 11u - Hamblin/Hancock</th>
</tr>
</thead>
<thead class="" data-bind="css: { hidden: members.pitchingLogs.stats().AwayTeam.Pitchers().length == 0 }">
<tr>
<th>Pitcher Name</th>
<th class="text-center">Pitch Count</th>
<th class="text-center" colspan="2">Innings Pitched</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: members.pitchingLogs.stats().AwayTeam.Pitchers">
<tr>
<td>
<select class="w-100" data-bind="value: $data.TeamPlayerId, optionsCaption:'- Pitcher -', optionsText: 'Name', optionsValue: 'Value', options: $root.members.pitchingLogs.stats().AwayTeam.AvailablePlayers, event: { change: $root.members.pitchingLogs.saveUpdate }"><option value="">- Pitcher -</option><option value="1283377">Blair, Beau (0)</option><option value="1283378">Caves, Beckham (0)</option><option value="1283379">Flowers, Kade (0)</option><option value="1283380">Garrison, Gavin (0)</option><option value="1283381">Guerrero, Saul (0)</option><option value="1283382">Hernandez, Jovani (0)</option><option value="1283383">Lewis, Jhett (0)</option><...