javascript - 卡住 html 表上的前 3 列

Question

我知道这可能是一个重复的问题，但我已经阅读了所有其他问题，但我无法让它们适用于我的代码。

当我尝试向我的 <td> 添加绝对位置时他们离开表格的列并叠加到下一列。

我需要阻止我的前 3 列，这样当用户向左滚动时，他们会留在 View 中。我设法为我的页眉做了这件事，但页眉不再与表格对齐，我找不到自己来解决这个问题。

任何帮助将不胜感激!

这是我的代码:

<style type="text/css" style="display: none">

    #filter {
        display: none;
    }

    thead > tr, tbody {
        width: inherit;
        display: block;
    }

    tbody {
        height: 800px;
        overflow:auto;
    }

</style>

@section Scripts
{
    <script>
        $('tbody tr').hover(function () {
            $(this).find('td').addClass('hovered');
        }, function () {
            $(this).find('td').removeClass('hovered');
        });
    </script>

    <script>
        $(function () {
            $("#pftable_hdr").dataTable();
        })
    </script>
    <script>
        function filter(selector, query) {
            query = $.trim(query); //trim white space
            query = query.replace(/ /gi, '|'); //add OR for regex query

            $(selector).each(function () {
                ($(this).text().search(new RegExp(query, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible');
            });
        }
    </script>
    <script>//FILTRO DE PLATILLOS
        $('tbody tr').addClass('visible');        //default each row to visible

        $('#filter').keyup(function (event) {

            if (event.keyCode == 27 || $(this).val() == '') {   //if esc is pressed or nothing is entered

                $(this).val('');//if esc is pressed we want to clear the value of search box

                $('tbody tr').removeClass('visible').show().addClass('visible');//If nothing is entered all rows matches so all visible
            }
            else {
                filter('tbody tr', $(this).val());//if there is text, lets filter
            }
        });
        $('#filter').show();
    </script>

   <script>
       $(document).ready(function () {

           $('.filter').change(function () {
               var values = [];
               $('.filter option:selected').each(function () {
                   if ($(this).val() != "") values.push($(this).text());
               });
               filter('table > tbody > tr', values);
           });

           function filter(selector, values) {
               $(selector).each(function () {
                   var sel = $(this);
                   var tokens = sel.text().split('\n');
                   var toknesObj = [], i;
                   for (i = 0; i < tokens.length; i++) {
                       toknesObj.push({ text: tokens[i].trim(), found: false });
                   }

                   var show = false;
                   console.log(values);
                   $.each(values, function (i, val) {

                       for (i = 0; i < toknesObj.length; i++) {
                           if (!toknesObj[i].found && toknesObj[i].text.search(new RegExp("\\b" + val + "\\b")) >= 0) {
                               toknesObj[i].found = true;
                           }
                       }
                   });

                   var count = 0;
                   $.each(toknesObj, function (i, val) {
                       if (val.found) {
                           count += 1;
                       }
                   });
                   show = (count === values.length);
                   show ? sel.show() : sel.hide();
               });
           }
       });
    </script>

}

<div class="page-title">
    <i class="fa fa-bar-chart-o"></i>
    <h3>POS</h3>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-12 sortable">
                <div class="grid simple vertical green">
                    <div class="grid-title no-border">
                        <h4>@this.FP("Punto de Venta")</h4>
                        <div class="tools">
                            <a href="javascript:;" class="collapse"></a>
                            <a href="javascript:;" class="reload"></a>
                        </div>
                    </div>
                    <div class="grid-body no-border">
                        <div class="p-l-20 p-r-20 p-b-10 p-t-10 b-b b-grey">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <h5 class="bold pull-left m-r-5">@this.FP("lbl.loader.date")</h5>
                                        <div class="controls">
                                            <div class="input-append success no-padding">
                                                <div id="reportrange" class="pull-right div-daterangepicker">
                                                    <i class="fa fa-calendar fa-lg"></i>
                                                    <span>@date.ToString("d MMMM, yyyy") - @date.ToString("d MMMM, yyyy")</span> <b class="caret"></b>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <h5 class="bold pull-left m-r-5">@this.FP("Turno")</h5>
                                        <div class="controls">
                                            <div class="input-append success no-padding">
                                                <select id="sel" name="sel" class="filter">
                                                    <option value="">Todos</option>
                                                    @foreach (var item in Model.Select(l => l.Rid).Distinct())
                                                    {
                                                        <option value="@item">@item</option>

                                                    }

                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <h5 class="bold pull-left m-r-5">@this.FP("PDV :")</h5>
                                        <div class="controls">
                                            <div class="input-append success no-padding">

                                                <select id="sel" name="sel" class="filter">

                                                    <option value="">Todos</option>

                                                    @foreach (var item in Model.Select(l => l.Pdv).Distinct())
                                                    {
                                                        <option value="@item">@item</option>

                                                    }

                                                </select>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" id="dateWidgetIncomeBanquetPanel">
                            @*<div style="height: 800px; overflow:auto; ">*@
                            <div style="height: 800px;  overflow: scroll">
                                @*<input type="text" class="search" />*@
                                <label for="filter">Filtro</label>
                                <input type="text" name="filter" value="" id="filter" placeholder="Busca Platillo" />

                                    <table width="300" class="table table-hover no-more-tables table-iconmebanquet-detail" id="pftable_hdr">

                                        <thead>

                                            <tr>

                                                <th style="">Platillo</th>
                                                <th style="">PDV</th>
                                                <th style="">Turno</th>
                                                <th style="">PV</th>
                                                <th style="">1</th>
                                                <th style="">2</th>
                                                <th style="">3</th>
                                                <th style="">4</th>
                                                <th style="">5</th>
                                                <th style="">6</th>
                                                <th style="">7</th>
                                                <th style="">8</th>
                                                <th style="">9</th>
                                                <th style="">10</th>
                                                <th style="">11</th>
                                                <th style="">12</th>
                                                <th style="">13</th>
                                                <th style="">14</th>
                                                <th style="">15</th>
                                                <th style="">16</th>
                                                <th style="">17</th>
                                                <th style="">18</th>
                                                <th style="">19</th>
                                                <th style="">20</th>
                                                <th style="">21</th>
                                                <th style="">22</th>
                                                <th style="">23</th>
                                                <th style="">24</th>
                                                <th style="">25</th>
                                                <th style="">26</th>
                                                <th style="">27</th>
                                                <th style="">28</th>
                                                <th style="">29</th>
                                                <th style="">30</th>
                                                <th style="">31</th>

                                                <th >Total</th>
                                                <th >Venta</th>
                                            </tr>
                                        </thead>

                                        <tbody>

                                            @foreach (var item in Model)
                                            {

                                                var total = 0;
                                                decimal costo = 0;

                                                for (int i = 1; i <= 31; i++)
                                                {
                                                    var value = 0;
                                                    if (item.Fecha.Day == i) { value = item.Cantidad; costo = costo + item.Total; }
                                                    total += value;
                                                }
                                                <tr>
                                                    <td style="" class="descripcion">@item.Descripcion</td>
                                                    <td class="pdv">@item.Pdv</td>
                                                    <td class="rid">@item.Rid</td>
                                                    <td>@((costo / (total + 1)).ToString("C"))</td>
                                                    @for (int i = 1; i <= 31; i++)
                                                    {
                                                        var value = 0;
                                                        int month = item.Fecha.Month;
                                                        if (item.Fecha.Day == i) { value = item.Cantidad; }
                                                        <td>
                                                            <a href="javascript:void(0)" data-toggle="popover"
                                                               data-html="true" data-original-title="@i/@month/2015" data-placement="bottom" data-content="Producto: @item.Descripcion<br />PV:@((costo / (total + 1)).ToString("C"))<br />Total:@value<br />Venta:@(((costo / (total + 1)) * value).ToString("C"))" data-trigger="hover">@value</a>
                                                        </td>
                                                    }
                                                    <td>@total</td>
                                                    <td>@(((costo / (total + 1)) * total).ToString("C"))</td>
                                                </tr>

                                            }

                                        </tbody>

                                    </table>

                            </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

</div>

Answer 1

可以使用具有 Z-index 属性的 CSS。我在 JSFiddle 中找到了一些与您的问题相关的代码。

http://jsfiddle.net/emn13/YMvk9/

<div><table>
        <tr><td class="headcol">1</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">2</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">3</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">4</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">5</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">6</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">7</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">8</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">9</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
</table></div>

CSS:

body { font:16px Calibri;}
table { border-collapse:separate; border-top: 3px solid grey; }
td {
    margin:0;
    border:3px solid grey; 
    border-top-width:0px; 
    white-space:nowrap;
}
div { 
    width: 600px; 
    overflow-x:scroll;  
    margin-left:5em; 
    overflow-y:visible;
    padding-bottom:1px;
}
.headcol {
    position:absolute; 
    width:5em; 
    left:0;
    top:auto;
    border-right: 0px none black; 
    border-top-width:3px; /*only relevant for first row*/
    margin-top:-3px; /*compensate for top border*/
}
.headcol:before {content: 'Row ';}
.long { background:yellow; letter-spacing:1em; }