html - 和 没有排队

Question

我只是想知道确保 <thead> 的最佳方法是什么和 <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;
}

jQUERY代码

$("#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>');
      });

Answer 1

从#dowithleads、thead、tbody 和tbody tr 中删除以下内容

float: left;

查看 Floatutorial有关 float 属性的示例和解释。