响应式 table 压缩表单字段，在 Bootstrap 中看不到文本 4

Question

当 table 适合屏幕时，如何解决选择时无法看到表单字段值的问题的最佳方法是什么。我希望 table 至少滚动并让表单字段真正可见。具体来说，你可以在投球局中看到这一点。

<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><option value="1283384">Pruitt, Colton (0)</option><option value="1283385">Ruggiano, Brooks (0)</option><option value="1283386">Smith, Greer (0)</option></select>
                            </td>
                            <td>
                                <select class="w-100" data-bind="value: $data.PitchCount">
                                    <option></option>
                                      
                                        <option value="99">99</option>
                                        <option value="100">100</option>
                                </select>
                            </td>
                            <td>
                                <select class="w-100" data-bind="value: $data.InningsPitched, event: { change: $root.members.pitchingLogs.saveUpdate }">
                                    <option></option>
                                  
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                </select>
                            </td>
                            <td>
                                <select class="w-100" data-bind="value: $data.InningsPitchedDecimal, event: { change: $root.members.pitchingLogs.saveUpdate }">
                                    <option></option>
                                    <option value="1/3">1/3</option>
                                    <option value="2/3">2/3</option>
                                </select>
                            </td>
                            <td class="table-col-sm-center">
                                <button class="btn btn-danger" data-bind="click: $root.members.pitchingLogs.deleteLog.bind($data, false)"><i class="fa fa-times"></i></button>
                            </td>
                        </tr>
                    
                        <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><option value="1283384">Pruitt, Colton (0)</option><option value="1283385">Ruggiano, Brooks (0)</option><option value="1283386">Smith, Greer (0)</option></select>
                            </td>
                            <td>
                                <select class="w-100" data-bind="value: $data.PitchCount">
                                    <option></option>
                                       
                                        <option value="99">99</option>
                                        <option value="100">100</option>
                                </select>
                            </td>
                            <td>
                                <select class="w-100" data-bind="value: $data.InningsPitched, event: { change: $root.members.pitchingLogs.saveUpdate }">
                                    <option></option>
                                   
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                </select>
                            </td>
                            <td>
                                <select class="w-100" data-bind="value: $data.InningsPitchedDecimal, event: { change: $root.members.pitchingLogs.saveUpdate }">
                                    <option></option>
                                    <option value="1/3">1/3</option>
                                    <option value="2/3">2/3</option>
                                </select>
                            </td>
                            <td class="table-col-sm-center">
                                <button class="btn btn-danger" data-bind="click: $root.members.pitchingLogs.deleteLog.bind($data, false)"><i class="fa fa-times"></i></button>
                            </td>
                        </tr>
                    </tbody>
                    <tbody data-bind="if: members.pitchingLogs.stats().AwayTeam.AvailablePlayers().length == 0"></tbody>
                    <tfoot data-bind="if: members.pitchingLogs.stats().AwayTeam.AvailablePlayers().length > 0">
                        <tr>
                            <td colspan="5" class="text-center">
                                <button class="btn btn-primary" data-bind="click: members.pitchingLogs.addLog.bind($data, false)"><i class="fa fa-plus"></i> Pitcher</button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="col-12 col-lg-6 mt-4 mt-lg-0" 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().HomeTeam.Name">TCR Bobcats - Wise</th>
                        </tr>
                    </thead>
                    <thead class="" data-bind="css: { hidden: members.pitchingLogs.stats().HomeTeam.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().HomeTeam.Pitchers">
                        <tr>
                            <td>
                                <select class="w-100" data-bind="value: $data.TeamPlayerId, optionsCaption:'- Pitcher -', optionsText: 'Name', optionsValue: 'Value', options: $root.members.pitchingLogs.stats().HomeTeam.AvailablePlayers, event: { change: $root.members.pitchingLogs.saveUpdate }"><option value="">- Pitcher -</option><option value="1282403">Challender, Brodie (29)</option><option value="1282404">Dakin, Caleb (13)</option><option value="1282405">Fox, Brayden (11)</option><option value="1282406">Gardner, Trevor (12)</option><option value="1282407">Geraci, Brennen (2)</option><option value="1282408">Hull, Brody (99)</option><option value="1282409">Hunt, Wyatt (6)</option><option value="1282410">Jolley, Makay (34)</option><option value="1282411">Titsworth, Beau (4)</option><option value="1282412">Wise, Colton (9)</option></select>
                            </td>
                            <td>
                                <select class="w-100" data-bind="value: $data.PitchCount">
                                    <option></option>
                                       
                                        <option value="99">99</option>
                                        <option value="100">100</option>
                                </select>
                            </td>
                            <td>
                                <select class="w-100" data-bind="value: $data.InningsPitched, event: { change: $root.members.pitchingLogs.saveUpdate }">
                                    <option></option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                </select>
                            </td>
                            <td>
                                <select class="w-100" data-bind="value: $data.InningsPitchedDecimal, event: { change: $root.members.pitchingLogs.saveUpdate }">
                                    <option></option>
                                    <option value="1/3">1/3</option>
                                    <option value="2/3">2/3</option>
                                </select>
                            </td>
                            <td class="table-col-sm-center">
                                <button class="btn btn-danger" data-bind="click: $root.members.pitchingLogs.deleteLog.bind($data, true)"><i class="fa fa-times"></i></button>
                            </td>
                        </tr>
                    
                      
                    
                        <tr>
                            <td>
                                <select class="w-100" data-bind="value: $data.TeamPlayerId, optionsCaption:'- Pitcher -', optionsText: 'Name', optionsValue: 'Value', options: $root.members.pitchingLogs.stats().HomeTeam.AvailablePlayers, event: { change: $root.members.pitchingLogs.saveUpdate }"><option value="">- Pitcher -</option><option value="1282403">Challender, Brodie (29)</option><option value="1282404">Dakin, Caleb (13)</option><option value="1282405">Fox, Brayden (11)</option><option value="1282406">Gardner, Trevor (12)</option><option value="1282407">Geraci, Brennen (2)</option><option value="1282408">Hull, Brody (99)</option><option value="1282409">Hunt, Wyatt (6)</option><option value="1282410">Jolley, Makay (34)</option><option value="1282411">Titsworth, Beau (4)</option><option value="1282412">Wise, Colton (9)</option></select>
                            </td>
                            <td>
                                <select class="w-100" data-bind="value: $data.PitchCount">
                                    <option></option>
                                       
                                        <option value="99">99</option>
                                        <option value="100">100</option>
                                </select>
                            </td>
                            <td>
                                <select class="w-100" data-bind="value: $data.InningsPitched, event: { change: $root.members.pitchingLogs.saveUpdate }">
                                    <option></option>
                                   
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                </select>
                            </td>
                            <td>
                                <select class="w-100" data-bind="value: $data.InningsPitchedDecimal, event: { change: $root.members.pitchingLogs.saveUpdate }">
                                    <option></option>
                                    <option value="1/3">1/3</option>
                                    <option value="2/3">2/3</option>
                                </select>
                            </td>
                            <td class="table-col-sm-center">
                                <button class="btn btn-danger" data-bind="click: $root.members.pitchingLogs.deleteLog.bind($data, true)"><i class="fa fa-times"></i></button>
                            </td>
                        </tr>
                    </tbody>
                    <tbody data-bind="if: members.pitchingLogs.stats().HomeTeam.AvailablePlayers().length == 0"></tbody>
                    <tfoot data-bind="if: members.pitchingLogs.stats().HomeTeam.AvailablePlayers().length > 0">
                        <tr>
                            <td colspan="5" class="text-center">
                                <button class="btn btn-primary" data-bind="click: members.pitchingLogs.addLog.bind($data, true)"><i class="fa fa-plus"></i> Pitcher</button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <div id="bottom-toolbar" class="toolbar navbar navbar-dark bg-secondary container-collapse">
        <div class="btn-toolbar">
            <button class="btn btn-primary" type="submit" data-bind="enable: (members.pitchingLogs.gameId() &amp;&amp; app.viewModel.hasUpdate()), css: { 'btn-success': app.viewModel.hasUpdate() }" disabled=""><i class="fa fa-check"></i> Save</button>
        </div>
    </div>

</form>

Answer 1

取出表格和selects上的所有.w-100，并将这些selects的宽度设置为fit-content。您可以为此创建自定义 class：

.w-fit-content {
    width: fit-content;
}

<td>
    <select class="w-fit-content" />
</td>

演示： https://jsfiddle.net/davidliang2008/b5kx4zty/18/

响应式 table 压缩表单字段，在 Bootstrap 中看不到文本 4

Responsive table condensing form fields where text cant be seen in Bootstrap 4

css

html-table

bootstrap-4

responsive