0

第一次在这里发布海报，所以轻松一点。我有一个带有表格的 html 表单，我有一个单独的 CSS 文件。在我添加到表格中之前，一切正常。这是html页面：

<body>
<div id="container">
<div id="header">
  <h1>

  </h1>
</div>

<div id="navigation">
  <ul>

  </ul>
</div>


    <div id="content">
    <h2>

    </h2>   

      <div class="scrollableContainer">
        <div class="scrollingArea">

         <table class="cruises scrollable">
          <thead>

            <tr> 
            </tr> 

          </thead>

           <tbody>

            <tr> 
            </tr> 

           </tbody>

          </table>  
         </div>
         </div> 

    </div>

      <div id="footer">

      </div>
 </div>
</body>

以及相应的CSS：

#container
{
  width: 100%;
  margin: 0 auto;
  background: #CCC;
  font-family:"Arial";
}

#header
{
  background: #6C0;
  padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
  float: left;
  width: 100%;
  background: #666;
}

#navigation ul
{
  margin: 0;
  padding: 0;
}

#navigation ul li
{
  list-style-type: none;
  display: inline;
}

#navigation li a
{
  display: block;
  float: left;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }


#content
{
  float:left; 
  width: 100%;
  padding: 20px 0;
  margin: 1%;
}

table.cruises { 
  table-layout:auto;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 11px;
  cellspacing: 0; 
  border-collapse: collapse; 
  width: 100%;    
  }

table.cruises th, table.cruises td { 
  border-left: 1px solid #999; 
  border-bottom: 1px solid #999; 
  padding: 2px 4px;
  }

table.cruises th { 
  background: #6b6164;
  color: white;
  font-variant: small-caps;
  width:100%;
  }

table.cruises td { 
  background: #eee; 
  overflow:hidden; 
  }

div.scrollableContainer { 
  position:fixed;   
  padding-top: 1.7em; 
  margin: 40px;    
  border: 1px solid #999;
  background: #aab;
  background: #6b6164;
  }

div.scrollingArea { 
  height: 200px; 
  overflow: auto; 
  }

table.scrollable thead tr {
  left: -1px; top: 0;
  position: absolute;
  width:100%;
  }

table.cruises td.operator { background: #ebcb4d; }
table.cruises td.tonnage  { background: white; }
table.cruises td.name     { background: #C7E0C1; }  
table.cruises td.began    { background: #B7C3E8; }

table.cruises .name     { width: 108px; }
table.cruises .operator { width: 126px; }
table.cruises .began    { width: 76px; text-align:center; }
table.cruises .tonnage  { width: 60px; text-align:center; }
table.cruises .status   { width: 160px; }

#content h2 
{ 
  margin: 0; 
}



#footer
{
  clear: both;
  background: #6C0;
  text-align: right;
  padding: 20px;
  height: 1%;
}

现在表格在我的页面上显示得很好。但它就像桌子只是漂浮在中间。我相信问题与类和 id 有关，它们在某种程度上存在冲突，但我不知道如何解决这个问题。我希望它位于页眉和页脚之间，但它只是与页脚重叠并且看起来很恶心。如果有人知道它为什么不起作用，那就太好了！

谢谢！

4

2 回答 2

1

position:fixed从你.scrollableContainer的css中删除。这就是导致您的桌子浮动的原因。

这是您的代码的 JSFiddle：http: //jsfiddle.net/wpkaJ/

这是在我的建议之后：http: //jsfiddle.net/wpkaJ/1/

于 2013-05-23T22:35:52.683 回答
0

您将来可能要记住的一件事是 CSS 特异性。覆盖单个 id 规则需要 256 个链接的类。除非你有充分的理由，否则不要使用 id，你会发现你的一些问题会消失。

http://css-specificity.webapp-prototypes.appspot.com/

于 2013-05-24T00:02:47.613 回答