个人中心
gpt4 book ai didi

html - CSS 类与 CSS id 冲突

转载 作者：太空宇宙 更新时间：2023-11-04 14:58:32 27 4
gpt4 key购买 nike

第一次张贴在这里所以放轻松。我有一个带有表格的 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%;
}

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

谢谢!

最佳答案

从您的 css 中的 .scrollableContainer 中删除 position:fixed。这是导致您的 table 漂浮的原因。

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

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

关于html - CSS 类与 CSS id 冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16724976/

27 4 0
文章推荐： java - JAXB : unmarshalexception - with linked exception: [java. io.IOException:流已关闭]
文章推荐： c++ - 如何清理(析构函数)动态指针数组？
文章推荐： C++ 如何给抽象类中的成员变量一个默认值？
文章推荐： java - 扩展自动生成的 JPA Controller (Netbeans 7.x)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com