2017-02-20 7 views
0

異なるIDを持つ2つのテーブルがあり、それぞれ異なるページにあります。個別にはうまくいきますが、1つのページにそれらを含めると、HTML要素のIDは異なりますが、スタイルは重複しています。以下は私のコードです:上記のコードのためのなぜ異なるHTML IDが同じスタイルを持つのですか?

<head> 

<rel="Stylesheet" href="CSS/styles.css"> 

</head> 

<body> 
<table id="logo" style="width:100%"> 
    <th><img src="Image/vg_logo.png" style="width:150px;height:100px"></th> 
</table> 
</body> 

スタイルは次のとおりです。

#logo{ 
border: none; 
} 

と別の要素コードです:

$query="select * from users order by id"; 
      $result=mysqli_query($con,$query); 
      echo '<table id="userTable"><tr><th>User ID</th><th>Full Name</th><th>User Name</th><th>User Role</th></tr>'; 

      while ($row=mysqli_fetch_array($result)) 
      { 
       echo '<tr><td>'.$row['id'].'</td><td>'.$row['userFullName'].'</td><td>'.$row['userName'].'</td><td>'.$row['type'].'</td></tr>'; 
      } 
      echo '</table>'; 

とスタイルである:今

#userTable{ 
float:right; 
width: 550px; 
} 
#userTable, th, td{ 
border: 1px solid black; 
border-collapse: collapse; 
font-family:tahoma; 
font-size:14px; 
} 

th{ 
background-color: #a1aec4; 
} 

問題は最初のページのページを含めるたびに問題ですeと2番目のテーブル、1番目のテーブルは境界を取得します。私がborder:noneを設定したのはなぜですか?

+0

出力HTMLの正当性を再確認しましたか?それは通常、始めるのに良い場所です。それを実現することなくIDを再利用することも可能です。 – GordonM

答えて

0

変更し、あなたのCSSでこの行:

#userTable, #userTable th, #userTable td{ 
0

#userTable, th, td{ 

すべて<th>td要素にグローバルスタイルを与えているので、あなたのセレクタと特異的であること...それはまた、追加されますthという要素の境界線があります。#logo表には、th要素が1つあるため、#logo表に境界線があるようです。

-1

@マークが正しい。メモの定義のためだけに

th{ 
background-color: #a1aec4; 
} 

その他の場合はすべてが同じ色になります。

+0

コメントを残すために回答を使わないでください – GordonM

関連する問題