Bootstrap 4表格单元格内容水平对齐失效问题求助

我之前做调度系统的时候也碰到过一模一样的问题——当表格因为列太多需要横向滚动时，单元格会被挤压变形，里面的单选按钮完全没法对齐。给你几个亲测有效的解决办法：

1. 强制单元格最小宽度，避免挤压 #

给表格的单元格设置最小宽度，确保每个小时列有足够空间容纳单选按钮组。先加个自定义CSS类：

/* 自定义调度表格样式 */
.scheduler-table td, .scheduler-table th {
    min-width: 130px; /* 可根据单选按钮文本长度调整，比如文本更长就设150px */
    white-space: nowrap; /* 防止标签文本换行 */
    vertical-align: middle; /* 让单元格内容垂直居中，视觉更整齐 */
}

然后把这个类加到你的表格上：

<table class="table table-bordered table-hover table-striped table-condensed scheduler-table">

这样不管表格怎么横向滚动，每个单元格都会保持至少130px的宽度，单选按钮组就能稳定对齐了。

2. 用Flex布局优化单元格内的单选按钮排列 #

即使单元格宽度有限，用Bootstrap的flex布局也能让单选按钮保持整齐的垂直对齐。修改单元格内的代码：

<td>
    <div class="form-group d-flex flex-column gap-2">
        <div class="radio">
            <label class="control-label font-weight-bold">
                <input type="radio" asp-for="@Model.MachineState" value="Manual" />
                <span asp-validation-for=@Model.MachineState></span> Manual
            </label>
        </div>
        <div class="radio">
            <label class="control-label font-weight-bold">
                <input type="radio" asp-for="@Model.MachineState" value="On" />
                <span asp-validation-for=@Model.MachineState></span> On
            </label>
        </div>
        <div class="radio">
            <label class="control-label font-weight-bold">
                <input type="radio" asp-for="@Model.MachineState" value="Off" />
                <span asp-validation-for=@Model.MachineState></span> Off
            </label>
        </div>
    </div>
</td>

这里用d-flex flex-column让单选按钮垂直排列，gap-2给每个选项加一点间距，不管单元格宽度怎么变，每个单选按钮都会左对齐，视觉上非常整齐。

3. 修正table-responsive的正确用法 #

注意Bootstrap 4的table-responsive是一个容器类，不是直接加在<table>标签上的！原来的写法可能会导致样式冲突，正确的用法是把表格放在table-responsive容器里：

<div class="row form-group ml-md-2 mr-md-2">
    <div class="col-md-12">
        <!-- 单独的table-responsive容器 -->
        <div class="table-responsive">
            <table class="table table-bordered table-hover table-striped table-condensed scheduler-table">
                <thead>
                    <!-- 表头内容 -->
                </thead>
                <tbody>
                    <!-- 表体内容 -->
                </tbody>
            </table>
        </div>
    </div>
</div>

这样横向滚动的是外层的容器，表格本身的布局会更稳定，不会出现单元格宽度异常的情况。

你可以先试试第三种修正用法，再配合第一种或第二种方案，基本就能解决问题了！

内容的提问来源于stack exchange，提问作者TommyBoyWest