堆棧內存溢出
  簡體   English   中英

將表格上的列與固定標題對齊

[英]Align columns on table with fixed header

 原文  2014-01-26 19:23:47  8   4    html/ css/ alignment/ html-table

問題描述

我搜索任何可以幫助我解決此問題的內容，但沒有任何幫助。

我在這里（ http://jsfiddle.net/YUyyZ/ ）復制了代碼。 錯誤是固定行（thead）與表格的其余部分（tbody）沒有對齊。

我能做什么？ 非常感謝。

HTML： 

<table id=ff witdh=100 style=position:absolute;top:0;bottom:0;left:0;right:0; border=1 cellpadding=4 cellspacing=0>

  <thead>
   <th align='center'> id </th>
   <th align='center'> aaaaaaa </th>
   <th align='center'> asdasdad </th>
   <th align='center'> adasd </th>
   <th align='center'> herh4e45h </th>
   <th align='center'> h4eh4ehg4 </th>
   <th align='center'> gh4gh4ege </th>
   <th align='center'> ehtre </th>
   <th align='center'> brebebes </th>
   <th align='center'> berberb </th>
   <th align='center'> erberberb </th>
   <th align='center'> erberdsber </th>
  <thead><tbody>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>

CSS： 

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%;
}
table thead
{
position:fixed;
}

4 個解決方案

解決方案1
 1 已采納  2014-01-26 19:30:13

只需刪除`標簽。 :)應該固定，經過測試。 工作提琴： http : //jsfiddle.net/dLQ6J/

添加了一些jQuery： 

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > 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();
    }
});

警告：要在包含<script>標記中的代碼的頁面上運行jQUERY，請不要忘記也添加jQuery JS：是否包含jQuery Javascript？ 要在頁面上運行jQuery，還必須包括以下內容： 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

沒有上面的行將無法正常工作:)

解決方案2
 1  

根據我的經驗，當固定桌子的頂部（thead）時，它的列寬可能不同於絕對或相對放置的表體或表體。

我過去解決此問題的方法是使用JavaScript在標題中查找每一列的寬度，並將主體的寬度設置為這些值。

我將嘗試將一些代碼放在一起。

基本上循環遍歷標題中的每一列並將寬度存儲在數組中，然后遍歷正文並將每個單元格寬度設置為適當的列寬以匹配標題。

在jQuery中-與普通JavaScript相比，至少對我而言容易得多： 

$(document).ready(function() {
  $('table#ff thead tr th').each(function(index) {
    var thisWidth = $(this).width();
    $('table#ff tbody tr td').eq(index).css('minWidth', thisWidth);
  });
});

我認為應該可行-可能需要稍作更改，但總的思路已經存在。

解決方案3
 0  2014-01-26 19:31:03

你有錯字

<table id=ff witdh=100 style=position:absolute;top:0;bottom:0;left:0;right:0; border=1 cellpadding=4 cellspacing=0>

嘗試width=100% 。

請注意，將元素設置為position:fixed ，會將其從流程中刪除，百分比寬度是文檔的百分比，而不是原始父元素。

解決方案4
 0  2014-01-26 19:36:25

刪除位置：固定到您的廣告{position：fixed}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 修復了align的表頭問題 固定表頭彈性表-頭垂直對齊 Bootstrap 表已修復 header 與問題對齊 修復了 Header 滾動表 - 對齊大小問題 將可滾動表格列與CSS中的標題對齊 帶有固定列和標題的可滾動表格，帶有現代 CSS 使“浮動”表標題中的列寬固定 具有標題和前三列的可滾動表 帶有固定的兩個左列和標題的響應表 如何將固定列的表格與內容彼此對齊的表格對齊
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM