Html CSS类与CSS id冲突_Html_Css

Html CSS类与CSS id冲突

html css

Html CSS类与CSS id冲突,html,css,Html,Css,第一次在这里张贴海报，所以要轻松。我有一个html表单，里面有一个表，还有一个单独的CSS文件。在我加入表格之前，一切都正常。以下是html页面： <body> <div id="container"> <div id="header"> <h1> </h1> </div> <div id="navigation"> <ul> </ul> </div>

第一次在这里张贴海报，所以要轻松。我有一个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>

现在，表格在我的页面上显示良好。但就像桌子在中间漂浮一样。我认为问题在于类和ID，它们在某种程度上存在冲突，但我不知道如何解决这个问题。我想它是之间的页眉和页脚，但它只是重叠的页脚，看起来恶心。如果有人知道它为什么不起作用，那就太好了

谢谢

从css中的

.scrollableContainer

中删除

位置：fixed

。这是什么导致您的表浮动

以下是您的代码：

下面是我的建议：

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

我的回答是否满足您的需要？仅供参考，我所做的只是将您的代码粘贴到JSFIDLE中，然后在chrome中使用右键单击并在浮动表上使用“Inspect Element”（IE和Firefox中也提供Firebug），并操纵css以查看是什么解决了问题。谢谢您，这似乎确实有效。但是，此“位置：固定”存在，因此表标题不会移动。当我移除它时，它只是一个普通的表。有什么方法可以在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%;
}