How can I get the table middle column to be scrollable?

Question

I have a table with 3 columns, as shown below. I'd like to make the middle column horizontally scrollable, so all the zeros will appear just in one line, and when I scroll all the three rows will move together .Thanks ![enter image description here ]1

      <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;
}

Try `overflow-x: auto;` Found here: [CSS only horizontal overflow](http://stackoverflow.com/questions/1336600/css-only-horizontal-overflow) http://stackoverflow.com/questions/1336600/css-only-horizontal-overflow — m33bo, Dec 13 '16 at 16:58
@Keith.Abramo I added the whole table code, and a bit of css — Mina, Dec 13 '16 at 17:13
@SankalpSingha I meant 3 columns. The middle column has many spans inside, but it still counts as 1 column. — Mina, Dec 13 '16 at 17:19

score 2 · Accepted Answer · answered Dec 13 '16 at 18:03

This will require you to restructure your table. In order to scroll the middle column, that column's data will need to be contained in one element. To do this I would recommend with creating a table with three columns and a sub table in each of those columns or the better approach since you are using bootstrap, would be to create a 3 column grid system with 3 in each of those columns.

Something like...

<div class="row">
    <div class="col-sm-4">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="col-sm-4 scroll-column">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="col-sm-4">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
</div>

.scroll-column {
    whitespace: no-wrap;
    overflow-x: auto;
}

score 0 · Answer 2 · answered Dec 13 '16 at 17:19

0

Give your middle row a max-width and then do a overflow-x: auto; on it.

For example :

<div class="container">

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

</div>

CSS:

.restrictedDiv {

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

}

answered Dec 13 '16 at 17:19

Sankalp Singha

4,461
5
39
58

I've searched a lot and tried a lot of solutions. It's not that easy, but thanks. – Mina Dec 13 '16 at 17:37
I dont understand, what is the issue that you are facing? If you are not able to determine the width of the element and not able to give a fixed width then you can use JS to calculate the width and then dynamiacally replace it. Please explain the issue that you might be facing so that we can try and help. – Sankalp Singha Dec 13 '16 at 17:39
@SankalpSingha Mina is not trying to scroll the row she is trying to scroll the middle column with the '0s' there are three columns the lighter column is the one she wants to scroll. Not the middle row. – Keith.Abramo Dec 13 '16 at 17:52

How can I get the table middle column to be scrollable?

2 Answers2