Question

我有一个包含3列的表格，如下所示。我想让中间列水平滚动，所以所有的零都会出现在一行中，当我滚动时，所有三行都会一起移动。谢谢 ![enter image description here ] 1 < / p>

      <div class="inner hiddenDiv">

           <table class="table bold" id="tableMiddle">
                <thead class="row">
                    <tr class="">

                        <th class="col-xs-3" data-bind="text:Name">Name of the project</th>


                        <th class="col-xs-7">
                            <!-- ko foreach: Totals -->
                            <span class="col-xs-1">
                                <input disabled="disabled" data-bind="value:Math.round($data)">
                            </span>

                            <span class="col-xs-1">
                                <input disabled="disabled" data-bind="value:Math.round($data)">
                            </span>

                            <span class="col-xs-1">
                                <input disabled="disabled" data-bind="value:Math.round($data)">
                            </span>

                            <span class="col-xs-1">
                                <input disabled="disabled" data-bind="value:Math.round($data)">
                            </span>

                            <span class="col-xs-1">
                                <input disabled="disabled" data-bind="value:Math.round($data)">
                            </span>

                            <span class="col-xs-1">
                                <input disabled="disabled" data-bind="value:Math.round($data)">
                            </span>

                            <span class="col-xs-1">
                                <input disabled="disabled" data-bind="value:Math.round($data)">
                            </span>

                            <span class="col-xs-1">
                                <input disabled="disabled" data-bind="value:Math.round($data)">
                            </span>

                            <span class="col-xs-1">
                                <input disabled="disabled" data-bind="value:Math.round($data)">
                            </span>

                            <span class="col-xs-1">
                                <input disabled="disabled" data-bind="value:Math.round($data)">
                            </span>

                            <span class="col-xs-1">
                                <input disabled="disabled" data-bind="value:Math.round($data)">
                            </span>

                            <span class="col-xs-1">
                                <input disabled="disabled" data-bind="value:Math.round($data)">
                            </span>
                            <!-- /ko -->
                        </th>

                        <th class="col-xs-2">
                            <span class="col-xs-6"></span>
                            <span class="col-xs-6"></span>
                        </th>
                    </tr>
                </thead>

                <tbody class="row">
                    <!-- ko foreach: Childs -->
                    <tr class="">
                        <td class="col-xs-3" data-bind="text:Name">Employee2</td>
                        <td class="col-xs-7">
                            <!-- ko foreach: Values -->

                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>

                            <!-- /ko -->
                        </td>
                        <td class="col-xs-2">
                            <span class="col-xs-6">
                                <input>
                            </span>
                            <span class="col-xs-6">
                                <input>
                            </span>
                        </td>
                    </tr>

                    <tr class="">
                        <td class="col-xs-3" data-bind="text:Name">Employee 1</td>
                        <td class="col-xs-7">
                            <!-- ko foreach: Values -->

                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>



                            <span class="col-xs-1">
                                <input data-bind="textInput:Value">
                            </span>

                            <!-- /ko -->
                        </td>
                        <td class="col-xs-2">
                            <span class="col-xs-6">
                                <input>
                            </span>
                            <span class="col-xs-6">
                                <input>
                            </span>
                        </td>
                    </tr>
                    <!-- /ko -->
                </tbody>
            </table>

        </div>



span {
      min-width: 30px;
}
input {
      padding: 4px 2px;
      width: 90%;
      background-color: transparent;
      border: none;
      border-radius: 1px;
      text-align: center;
}

Answer 1

这将要求您重组表格。为了滚动中间列，该列的数据将需要包含在一个元素中。为此，我建议在每个列中创建一个包含三列和一个子表的表，或者更好的方法，因为您使用的是bootstrap，就是创建一个3列网格系统，每个列中都有3个。< / p>

像...一样的东西。

<?php dynamic_sidebar( 'footer-blocks' ); ?>

Answer 2

将中间行设为max-width，然后对其进行overflow-x: auto;。

例如：

<div class="container">

<div class="restrictedDiv">
<!-- long values here !-->
</div>

</div>

CSS：

.restrictedDiv {

max-width: 500px;
overflow-x: auto;

}

如何让表格中间列可滚动？

2 个答案: