Question

这里的第一次海报很容易。我有一个带有表格的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有关，它们在某种程度上是冲突的，但我不知道如何解决这个问题。我希望它在页眉和页脚之间，但它只是重叠页脚，看起来很粗糙。如果有人知道为什么它不起作用会很棒！

谢谢！

Answer 1

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

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

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

Answer 2

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

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

CSS类与CSS id冲突

2 个答案: