<thead><th>と<tbody>​​

Question

を並べていない私はちょうど<thead>と<tbody><td>と<th>が同じ幅を満たしていることを確認するための最良の方法は何か疑問に思って。終わりに、列と行が満たされておらず、間違っていれば、私には良いことではありません。表

#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の移入テーブルの

CSSコード

$.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をチェックしてください。