将每个th与下面的td对齐（tbody存在，thead不存在）

时间：2017-10-25 12:02:56

标签： html css

我创建了一个片段，我试图让第一行浮动。 tbody中的第一行包含了heeaders（th）。在我的表中没有thead部分。浮动工作，但我不知道如何更改它，以使每个th与下面的tds对齐。我知道如何使它与thead一起使用。但在这种情况下，所有行都在tbody中。

＆＃13;
＆＃13; 
  table tbody tr:first-child
  { 
    position:fixed;
  }
＆＃13; 
<table border="1" class="richtext-query-table">
   <tbody>
      <tr>
         <th>A</th>
         <th>B</th>
         <th>C</th>
         <th>D</th>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
   </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我决定a）创建thead，删除tbody的第一行并将其粘贴到thead中。然后，我使用脚本使标题浮动。

＆＃13;
＆＃13; 
t = $('table.richtext-query-table')
firstTr = t.find('tr:first').remove()
firstTr.find('td').contents().unwrap().wrap('<th>')
t.prepend($('<thead></thead>').append(firstTr))

var tableOffset = $(".richtext-query-table").offset().top;
var $header = $(".richtext-query-table > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();
    
    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});
＆＃13; 
table { height: 10px; }
#header-fixed { 
    position: fixed; 
    top: 0px; display:none;
    background-color:white;
}
table a:link {
    color: #666;
    font-weight: bold;
    text-decoration:none;
}
table a:visited {
    color: #999999;
    font-weight:bold;
    text-decoration:none;
}
table a:active, table a:hover {
    color: #bd5a35;
    text-decoration:underline;
}
table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    background:#eaebec;
    border:#ccc 1px solid;
    border-radius:3px;
    border-collapse:collapse;
    border-spacing: 0;
    box-shadow: 0 1px 2px #d1d1d1;
}
table th {
    padding:10px 10px 10px 10px;
    border-top:0;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    background: #ededed;
}
table th:first-child {
    text-align: left;
}
table tr:first-child th:first-child {
    border-top-left-radius:3px;
    border-left: 0;
}
table tr:first-child th:last-child {
    border-top-right-radius:3px;
}
table tr {
    text-align: center;
}
table td:first-child {
    text-align: left;
    border-left: 0;
}
table td {
    padding:10px;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    background: #fafafa;
}
table tr:last-child td {
    border-bottom:0;
}
table tr:last-child td:first-child {
    border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
    border-bottom-right-radius:3px;
}
table tr:hover td {
    background: #f2f2f2;
}
table th, table td {
    width: 160px;
}
#wrapper {
    width: 100%;
    height: 100%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1" class="richtext-query-table">
   <tbody>
      <tr>
         <th>A</th>
         <th>B</th>
         <th>C</th>
         <th>D</th>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
      <tr>
         <td><img src="AAAAAAAAAAAA" class="img_show_bigger_hover" height="40px"></td>
         <td>BBBB</td>
         <td>£1,169.29</td>
         <td>546,331</td>
      </tr>
   </tbody>
</table>
<table id="header-fixed"></table>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题