程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

<thead><th> 和 <tbody><td> 没有对齐

发布于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、tbodytbody tr中删除以下内容

float: left;

查看Floatutorial以获取有关 float 属性的示例和说明。




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/296262/e058afb0468343905c60/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

12 0
收藏该文
已收藏

评论内容:(最多支持255个字符)