顶部有固定标题的桌子 [英] table with fixed header at top

问题描述

我试图在数据库的顶部为数据创建一个带有固定标题的表格。当我将position：fixed;添加到头文件的CSS时，它将它保留在顶部，但它会将整个头文件强制到第一列。我怎样才能得到表头在顶部，并与列正确对齐？如果可能的话，我更喜欢css / html解决方案。

编辑：我已经尝试了很多我已经找到的jQuery解决方案，并通过谷歌。有些工作，有些则不。那些在我自己的网页上运行的其他脚本与它们结合时会自行工作的倾向会破坏...

  <风格> 
 .dg_hdr_row {
 position：fixed; 
 top：0; 
 height：25px; 
} 
 
 .dg_col1 {width：60％; border：1px solid＃000; padding：5px;} 
 .dg_col2 {width：15％; border：1px solid＃000; padding：5px;} 
 .dg_col3 {width：10％; border：1px solid＃000; padding：5px;} 
 .dg_col4 {width：15％; border：1px solid＃000; padding：5px;} 
 
< / style> 
 
< table width =100％> 
 
< thead width =100％> 
< tr width =100％class =dg_hdr_row> 
< th width =60％>第1栏< / th> 
< th width =15％>第2栏< / th> 
< th width =10％>第3栏< / th> 
< th width =15％>第4栏< / th> 
< / tr> 
< / thead> 
 
< tbody> 
< tr class =dg_row> 
< td class =dg_col1>< / td> 
< td class =dg_col2>< / td> 
< td class =dg_col3>< / td> 
< td class =dg_col4>< / td> 
< / tr> 
< tr class =dg_row> 
< td class =dg_col1>< / td> 
< td class =dg_col2>< / td> 
< td class =dg_col3>< / td> 
< td class =dg_col4>< / td> 
< / tr> 
< / tbody> 
< / table> 
  

解决方案

这是特别困难的。

固定元素是相对于浏览器的观点

当您声明 position：fixed ，任何额外的仓位规则（如 left 或 top ）都会放置标题相对于视口本身 - 屏幕的左上角。您无法使用任何技巧使其相对于其父项，因为无论何时页面滚动它都会位于相同的位置。这可能不会影响您的网页，但它仍然是需要考虑的事情。

固定元素在移动浏览器中无法正常工作

我不知道您的具体使用情况，但这是值得深思的。

固定位置将元素从正常流程中移除

据我所知，这就是导致这个问题的原因。当声明 position：fixed 时，该元素实际上脱离了页面元素的正常布局和位置，现在在它自己的唯一块中工作。

从 CSS2规范（这也适用于固定位置）：

在绝对定位模型中，尊重其包含的区块。它完全从正常流程中移除（它对后来的兄弟姐妹没有影响）。一个绝对定位的盒子为普通儿童和绝对（但不是固定的）定位后代建立一个新的包含区块。但是，绝对定位元素的内容不会在任何其他框中流动。它们可能会掩盖另一个盒子的内容（或者被自己挡住），这取决于重叠盒子的堆叠水平。

这是好，因为你希望头部悬浮在表格上方，但也不好，因为在大多数浏览器中，它与表格的其余部分分开布置。

潜在修正

• 如果页面上唯一的东西是你的表格，你应该能够设置标题要使用 width：100％，并应用与表格其余部分相同的单元格宽度。但是，调整尺寸可能很难匹配正确，特别是在窗口大小调整的情况下。

使用一些简单的JavaScript来显示标题。我知道你想用HTML和CSS来保持这种状态（我通常也这样做），但是JavaScript很合适，因为浮动标头不应该是使用网站的重要部分。它应该可用于支持它的浏览器，但那些不应该仍然能够使用该表的应用程序。 CSS-Tricks

有一个很好的技巧（ http：// css-tricks .com / persistent-headers / ），但您可以通过在您最喜爱的搜索引擎上查找粘性表格标题来查找其他人。

ul>


I am trying to create a table w/ a fixed header at the top for data from our database. When I add 'position:fixed;' to the header's css it keeps it at the top but it forces the entire header to the first column. How can I get the table header to be at the top and be correctly aligned w/ the columns? I'd prefer a css/html solution, if possible.

EDIT: I've tried quite a few of the jQuery solutions that I've found on SO and through google. Some work, some don't. Those that do work on their own tend to break when I combine it with other scripts I have running on my pages...

<style>
  .dg_hdr_row{
  position: fixed;
  top:0;
  height: 25px;
  }

  .dg_col1{ width:60%; border: 1px solid #000; padding: 5px;}
  .dg_col2{ width:15%; border: 1px solid #000; padding: 5px;}
  .dg_col3{ width:10%; border: 1px solid #000; padding: 5px;}
  .dg_col4{ width:15%; border: 1px solid #000; padding: 5px;}

</style>

<table width="100%">

 <thead width="100%" >
  <tr width="100%" class="dg_hdr_row" >
   <th width="60%">Column 1</th>
   <th width="15%">Column 2</th>
   <th width="10%">Column 3</th>
   <th width="15%">Column 4</th>
  </tr>
 </thead>

    <tbody>
        <tr class="dg_row">
            <td class="dg_col1"></td>
            <td class="dg_col2"></td>
            <td class="dg_col3"></td>
            <td class="dg_col4"></td>
        </tr>
        <tr class="dg_row">
            <td class="dg_col1"></td>
            <td class="dg_col2"></td>
            <td class="dg_col3"></td>
            <td class="dg_col4"></td>
        </tr>       
    </tbody>
</table>

解决方案

So there are some subtle issues with fixed positioning that make this particularly difficult.

Fixed elements are relative to the browser viewpoint

When you declare position: fixed, any additional position rules (like left or top) will place the header relative to the viewport itself - the top left corner of the screen. You can't use any tricks to make it relative to its parent, either, since it will be in the same place whenever the page scrolls. This might not affect your web page, but it's still something to consider.

Fixed elements don't work as expected in mobile browsers

I don't know your specific use case, but it's food for thought.

Fixed positioning removes elements from normal flow

This is what's causing the problem, as far as I can tell. When position: fixed is declared, the element actually breaks out of the normal layout and position of elements of the page, and now works in its own unique block.

From the CSS2 spec (this applies to fixed positioning as well):

In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.

This is good, since you want the header to float above the table, but also bad because in most browsers, it's laid out separately from the rest of the table.

Potential fixes

• If the only thing on the page is your table, you should be able to set the header to use width: 100% and apply the same cell widths as the rest of the table. It might be hard to get the sizing to match up just right, though, especially when the window is resized.

• Use some simple JavaScript to display the header. I know you want to keep this with HTML and CSS (I usually do too), but JavaScript fits well because the floating header shouldn't be an essential part of using the site. It should be available for browsers that support it, but those that don't should still be able to use the table. There's a very good technique at CSS-Tricks
  (http://css-tricks.com/persistent-headers/), but you'll be able to find others by looking for "sticky table headers" on your favorite search engine.

这篇关于顶部有固定标题的桌子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！