很多人仍然使用表格来布局控件,数据等.这个例子就是流行的jqGrid.但是,有一些神奇的事情我似乎无法理解(它的桌子大声喊叫,可能有多少魔法？)
如何设置表的列宽并让它像jqGrid一样服从!？如果我试图复制它,即使我设置了每个<td style='width: 20px'>,一旦其中一个单元格的内容大于20px,单元格就会扩展!
任何想法或见解？
所以我有一个这种风格的桌子:
table-layout: fixed;
这使得所有列的宽度相同.我希望有一列(第一列)更宽,然后其余的列占据表的剩余宽度,宽度相等.
怎么实现呢？
table {
border-collapse: collapse;
width: 100%;
border: 1px solid black;
background: #ddd;
table-layout: fixed;
}
table th, table td {
border: 1px solid #000;
}
table td.wideRow, table th.wideRow {
width: 300px;
}<table class="CalendarReservationsBodyTable">
<thead>
<tr>
<th colspan="97">Rezervovane auta</th>
</tr>
<tr>
<th class="corner wideRow">Auto</th>
<th class="odd" colspan="4">0</th>
<th class="" colspan="4">1</th>
<th class="odd" colspan="4">2</th>
<th class="" colspan="4">3</th>
<th class="odd" colspan="4">4</th>
<th class="" colspan="4">5</th>
<th class="odd" colspan="4">6</th>
<th class="" colspan="4">7</th>
<th class="odd" colspan="4">8</th>
<th class="" colspan="4">9</th> …我已经在datatables.net论坛上发布了这个,但一周之后,仍然没有回应.希望我能在这里找到帮助......
我正在使用数据表版本1.8.1,并且在启用垂直滚动的情况下对列标题对齐进行了噩梦.
使用下面发布的代码,标题在Firefox和IE8和IE9中正确排列,但Chrome和IE7关闭.我在这个项目中使用了很多数据表,这对每个人来说都是一个问题.我迫切需要帮助!
编辑:我已经发现这与设置表格的宽度有关.数据表占用其容器的宽度.如果我没有设置宽度,一切都很好(但桌子太大了,无法在页面上需要它).如果我将表格的div(或某个较高的父级div)给予宽度,则标题不会正确排列.
谢谢!!
截图:
www.dennissheppard.net/firefox_alignment.png
www.dennissheppard.net/chrome_alignment.png
www.dennissheppard.net/ie7_alignment.png
otable = $('#order_review_grid').dataTable({
'fnRowCallback': function (nRow, strings, displayIndex, dataIndex) {
return formatRow(nRow, dataIndex);
},
'fnDrawCallback':function()
{
checkIfOrderSubmitted(this);
},
'aoColumnDefs':
[
{ 'bVisible': false, 'aTargets': [COL_PRODUCT] },
{ 'bSortable': false, 'aTargets': [COL_IMAGE, COL_DELETE] },
{ 'sClass': 'right_align', 'aTargets': [COL_PRICE] },
{ 'sClass': 'center_align', 'aTargets': [COL_BRAND,COL_PACK] },
{ 'sClass': 'left_align', 'aTargets': [COL_DESCRIPTION] }
],
'sDom': 't',
'sScrollY':'405px',
'bScrollCollapse':true,
'aaSorting':[]
});
<table id="order_review_grid" class="grid_table" cellpadding="0px" cellspacing="0px">
<thead class="grid_column_header_row" id="order_review_grid_column_header_row">
<tr>
<td class="" …我不确定我是否重复这个问题,如果是正确的地方指导:)
我正在使用数据表并尝试实现水平滚动并找到此链接
http://www.datatables.net/examples/basic_init/scroll_x.html
我在我的数据表代码中使用了这些属性,并且在UI中遇到了问题.
我的数据得到了水平滚动条,但是我的列没有扩展而且没有按预期工作.我的正常列下面有一个额外的空列.
基本上我的UI搞砸了.我看到了同样的老线程讨论!
这些问题现在解决了吗？
================================
添加示例代码
$("#results").dataTable({
"aaData": [
//My data
],
"aoColumns": [
//My Columns
],
"bPaginate": true,
"bSort": true,
"bFilter": false,
"bJQueryUI": false,
"bProcessing": true,
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
});
标题与列宽不对齐.JsFiddle.
我正在使用:
这是我正在使用的代码:
JS:
$(document).ready(function() {
var aoColumns = [null,null,null,null,null,null,null,null,null,null,null];
var oTable = $('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "150%",
"bPaginate": false,
"bAutoWidth": false,
"aoColumns": aoColumns
} );
var oFC = new FixedColumns( oTable, {
"iLeftColumns": 4
} );
oTable.fnAdjustColumnSizing();
});
HTML:
<body>
<div class="container">
<table width="100%" cellpadding="0" cellspacing="0" border="1" id="example">
<thead>
<tr>
<th rowspan="2">Branch</th>
<th rowspan="2">Object</th>
<th rowspan="2">Address</th>
<th rowspan="2">Count</th>
<th colspan="7">Availability</th>
</tr>
<tr>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
</tr> …我有一个非常大的列,大约40列,并希望水平滚动,但它无法正常工作.
$(document).ready(function () {
$('#example').dataTable({
"oTableTools": {
"sScrollY": 200,
"sScrollX": "200%",
"sScrollXInner": "110%"
}
});
});
我有一个大约300行12列的大桌子.通过页面翻页滚动表格时<thead>,默认情况下不显示内容.我想在滚动"内部"时看到它<tbody>.也就是说,如果屏幕顶部以一行开头,我希望首先显示标题.否则它应该像常规表一样.
到目前为止我看到的常见解决方案是创建一个可以自行滚动的表(因此与页面滚动无关).也就是说,这个问题的答案表明了什么.
但是如果跨越屏幕有很多列,这不是很实用,特别是因为现在有两个独立的滚动条.在移动设备上,第二个滚动条带走了大量宝贵的空间.使用它也很烦人.你不能简单地"翻身",但你必须集中精力去击中那个小小的滚动条.在其他浏览器上,您可以滚动触摸其中的数据,但一旦您移出外部,另一个恼人的运动发生...
有一个干净的CSS方式来做到这一点？
css ×4
html ×4
jquery ×4
datatables ×2
html-table ×1
javascript ×1
jquery-ui ×1
layout ×1
xhtml ×1