发布于2022-01-27 00:12 阅读(773) 评论(0) 点赞(12) 收藏(5)
我只是想知道确保<thead>
and<tbody>
<td>
和<th>
满足相同宽度的最佳方法是什么。归根结底,如果列和行不相交并且对齐错误,这对我没有好处。
表格的 CSS 代码
#dowithleads, thead, tbody{
float:left;
width:1024px;
min-height:40px;
margin-top:10px;
border:thin solid #999;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/*background:url("../images/ie/formareabg.png") repeat;*/
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#dddddd));
background: -webkit-linear-gradient(#ffffff, #dddddd);
background: -moz-linear-gradient(#ffffff, #dddddd);
background: -ms-linear-gradient(#ffffff, #dddddd);
background: -o-linear-gradient(#ffffff, #dddddd);
background: linear-gradient(#ffffff, #dddddd);
behavior:url(border-radius.htc);
border-bottom:none;
}
tr{
width:100%;
}
td,th{
cellspacing:0;
width: 150px;
border-right:thin solid #999;
line-height:40px;
min-height:40px;
}
.bigger{
min-width:200px;
max-width:200px;
}
tbody tr{
float:left;
border:thin solid #999;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background:url("../images/manage.body.jpg") repeat;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#dddddd));
background: -webkit-linear-gradient(#ffffff, #dddddd);
background: -moz-linear-gradient(#ffffff, #dddddd);
background: -ms-linear-gradient(#ffffff, #dddddd);
background: -o-linear-gradient(#ffffff, #dddddd);
background: linear-gradient(#ffffff, #dddddd);
behavior:url(border-radius.htc);
border-bottom:none;
}
thead{
color:#fff;
margin:0;
background:url("../images/manage.black.jpg") repeat;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#333333));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #666666, #333333);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #666666, #333333);
/* IE 10 */
background: -ms-linear-gradient(top, #666666, #333333);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #666666, #333333);
}
tbody{
font-size:12px;
margin:0;
background:#fff;
border:none;
border-bottom:thin solid #999;
}
th.small, td.small{
min-width:40px;
width:40px;
max-width:40px;
}
.last{
border:none;
}
.page-number, .view-all{
color:#fff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background:#000;
margin:3px;
min-width:30px;
min-height:30px;
line-height:30px;
float:left;
background:url("../images/manage.black.jpg") repeat;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#333333));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #666666, #333333);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #666666, #333333);
/* IE 10 */
background: -ms-linear-gradient(top, #666666, #333333);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #666666, #333333);
}
#searchbox{
float:right;
width:250px;
text-align:left;
}
#manageleads{
width:1024px;
}
.ui-state-active{
background:url("../images/manage.active.jpg") repeat;
}
button.manage{
font-size:16px;
width:160px;
float:left;
}
查询代码
$("#menuarea").html('<a href="#!/home" id="gotohome"><div id="backmain" class="backbg">Back</div></a><div id="nav" class="backbgright">New Business Lead</div>'+
'<div id="dowithleads"><button id="editlisting" class="blackbutton manage">Edit Listing</button><button id="sendemailout" class="blackbutton manage">Send Message</button>'+
'<div id="searchbox"><form action="#"><fieldset><input type="text" name="search" value="" id="searchleads" placeholder="Search" autofocus /></fieldset></form></div>'+
'</div>'+
'<table cellpadding="0" cellspacing="0" border="0" class="sortable paginated" id="manageleads">'+
' <thead>'+
' <tr>'+
' <th class="small" id="first"><input type="checkbox" class="checkbox checkall" value="Yes"></th>'+
' <th class="sort-alpha">Created Time</th>'+
' <th class="sort-alpha">Company</th>'+
' <th class="sort-alpha">Lead Name</th>'+
' <th class="sort-alpha">Phone No.</th>'+
' <th class="sort-alpha bigger">Email</th>'+
' <th class="sort-alpha">Lead Owner</th>'+
' <th class="sort-alpha last">Lead Status</th>'+
' </tr>'+
' </thead>'+
' <tbody></tbody>'+
'</table>');
jQuery 填充表
$.getJSON('system/classes/core.php?task=listmyleads&userid='+userid+'&callback=?', function(dataleads) {
$.each(dataleads,function(i, myleads){
$("tbody").append('<tr>'+
' <td id="row" class="small"><input id="'+myleads.customer_id+'" type="checkbox"></td>'+
' <td>'+myleads.CreatedTime+'</td>'+
' <td>'+myleads.Company+'</td>'+
' <td class="center">'+myleads.FirstName+' '+myleads.LastName+'</td>'+
' <td class="center">'+myleads.Phone+'</td>'+
' <td class="center bigger">'+myleads.Email+'</td>'+
' <td class="center">'+myleads.stafffirstname+' '+myleads.stafflastname+'</td>'+
' <td class="center last">A</td>'+
' </tr>');
});
从#dowithleads、thead、tbody和tbody tr中删除以下内容
float: left;
查看Floatutorial以获取有关 float 属性的示例和说明。
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/296262/e058afb0468343905c60/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!