冻结前3列'；s在html表上
本文关键字：html 表上 3列 冻结 | 更新日期: 2023-09-27 18:28:34
我知道这可能是一个重复的问题，但我已经阅读了所有其他问题，我无法让它们在我的代码中工作。
当我试图将绝对位置添加到<td>列时，它们会从表中出来并叠加到下一列。
我需要阻止我的前3列，这样当用户向左滚动时，他们就可以继续查看。我设法为我的标题做了这件事，但标题不再与表对齐，我无法解决这个问题。
任何帮助都将不胜感激！
这是我的代码：
<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>
在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; }