自定义列宽表引导 cshtml 可滚动

Question

尝试使用引导格式制作侧滚动表。我需要一种从下拉选择（DropdownList）中显示整个字符串的方法。由于它封装在引导程序中，因此列宽是有限的。我希望列更宽，并具有专门针对表格的侧滚动功能。

<div class="row">
    <div class="col-md-12">
        <table id="DetailsMolarTable" class="table table-striped table-condensed">
            <thead>
                <tr>
                    <th colspan="1">@ApplicationStrings.RequestedConcentration</th>
                    <th colspan="1" class="conc-requested-weight-input"></th>
                    <th colspan="1" class="conc-requested-volume-input"></th>
                    <th colspan="1" class="oem-range-input"></th>
                    <th colspan="1">@ApplicationStrings.ConcCertified</th>
                </tr>
                <tr>
                    <th hidden>ID</th>
                    <th class="col-md-1 conc-requested-molar-input">@ApplicationStrings.Molar</th>
                    <th class="col-md-1 conc-requested-weight-input">@ApplicationStrings.Weight</th>
                    <th class="col-md-1 conc-requested-volume-input">@ApplicationStrings.Volume</th>
                    <th class="col-md-1 oem-range-input">@ApplicationStrings.OEMRange</th>
                    <th class="col-md-1 conc-certified-molar-input">@ApplicationStrings.Molar</th>
                    <th class="col-md-1 conc-certified-weight-input">@ApplicationStrings.Weight</th>
                    <th class="col-md-1 conc-certified-volume-input">@ApplicationStrings.Volume</th>
                    <th class="col-md-1 precision-select">@ApplicationStrings.Precision</th>
                    <th class="col-md-1" >@ApplicationStrings.Units</th>
                    <th class="col-md-1">@ApplicationStrings.PXNum</th>
                    <th class="col-md-2">@ApplicationStrings.ComponentName</th>
                    <th class="col-md-1">@ApplicationStrings.ComponentGrade</th>
                    <th class="col-md-1">@ApplicationStrings.Uncertainty</th>
                    <th class="col-md-1">@ApplicationStrings.Instruments</th>
                    <th class="col-md-1">@ApplicationStrings.GasStandards</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Details)
                {
                <tr>
                    <td id="certDetailId" hidden class="item-index">@item.DetailID</td>
                    <td class="conc-requested-molar-input">
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control" value="@item.ConcRequested_Mol" />
                            <div class="input-group-btn">
                                <button class="btn btn-default" name="btnBalance" aria-label="balance concentration">
                                <span class="glyphicon glyphicon-equalizer"> </span>
                                </button>
                            </div>
                        </div>
                    </td>
                    <td class="conc-requested-weight-input">
                        <input type="text" class="form-control input-sm" readonly value="@item.ConcRequested_Wt" />
                    </td>
                    <td class="conc-requested-volume-input">
                        <input type="text" class="form-control input-sm" readonly value="@item.ConcRequested_LiqVol" />
                    </td>
                    <td class="oem-range-input">
                        <input type="text" class="form-control input-sm" value="@item.OEMRangeRequested" />
                    </td>
                    <td class="conc-certified-molar-input">
                        <input type="text" class="form-control input-sm" value="@item.ConcCertified_Mol" />
                    </td>
                    <td class="conc-certified-weight-input">
                        <input type="text" class="form-control input-sm" readonly value="@item.ConcCertified_Wt" />
                    </td>
                    <td class="conc-certified-volume-input">
                        <input type="text" class="form-control input-sm" readonly value="@item.ConcCertified_LiqVol" />
                    </td>
                    <td class="precision-select">
                        @Html.DropDownList("precision-select", item.PrecisionSelect, new { @class = "form-control input-sm" })
                    </td>
                    <td class="unit-select">
                        @Html.DropDownList("units-select", item.Units, item.ConcUnit, new { @class = "form-control input-sm" })
                    </td>
                    <td class="px-input">
                        <input type="text" class="form-control input-sm" value="@item.GasNumber" />
                    </td>
                    <td class="px-name">
                        @Html.DropDownList("px-name", item.Gases, "", new { @class = "form-control input-sm" })
                    </td>
                    <td class="grade-select">
                        @Html.DropDownList("grade-select", item.Grades, "", new { @class = "form-control input-sm" })
                    </td>
                    <td class="uncertainty-input">
                        <input type="text" class="form-control input-sm" value="@item.Uncertainty" />
                    </td>
                    <td class="instruments">
                        @Html.DropDownList("instrument-select", item.Instruments, "", new { @class = "form-control input-sm" })
                    </td>
                    <td class="gasstd-select">
                        @Html.DropDownList("gasstd-select", item.GasSTDItems, "", new { @class = "form-control input-sm" })
                    </td>
                    <td>
                        <button name="btnDeleteRow" aria-label="delete" class="btn btn-icon btn-icon-cancel">
                        <span class="glyphicon glyphicon-trash"></span>
                        </button>
                    </td>
                </tr>
                }
            </tbody>
            <tfoot><tfoot>
        </table>
    </div>
</div>

我们赞赏替代解决方案。 :)

Answer 1

    <div style="overflow-y:auto; max-height: 100px">
        <table id="table" class="table table-condensed table-hover globalVariablesTable table-striped">

            <tr>
                <th><strong>Variable Names</strong></th>
                <th><strong>Values</strong></th>                                             
                <th><strong>Actions</strong></th>                                            
            </tr>
            <tbody>
                <tr>
                    <td><strong>Variable Names</strong></td>
                    <td><strong>Values</strong></td>                                             
                    <td><strong>Actions</strong></td>                                            
                </tr>
            </tbody>
        </table>
    </div>