没有 id 的表使用来自其他表 id 的 CSS

Question

我有一个问题，我正在使用来自网络的表格模板，它只是 CSS 和 html。所以我将 CSS 插入到我的网站 CSS 中。表格已将 id 设置为“tabulka”，所以在 CSS它的#tabulka 等....一切正常，直到我在该页面上制作了第二个表格，该表格没有分配 id，但它使用来自 id "tabulka" 的 CSS...

CSS：

#tabulka {
overflow:hidden;
border:1px solid #d3d3d3;
background:#fefefe;
width:100%;
margin:5%  0;
-moz-border-radius:5px; /* FF1+ */
-webkit-border-radius:5px; /* Saf3-4 */
border-radius:5px;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);}
#tabulka th, td {padding:3px 10px 3px; text-align:center; }

#tabulka th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}

#tabulka td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}

#tabulka tr.odd-row td {background:#f6f6f6;}

#tabulka td.first, th.first {text-align:left}

#tabulka td.last {border-right:none;font-size:12px;padding-top:10px;}

html:

<table id="tabulka"><tr><td>something</td></tr></table>
<table>
    <form method="POST" action="admin.php">
      <tr>
        <td>Name:</td><td><input type="text" name="ufoname"></td>
      </tr>
      <tr>
        <td>Max</td><td><input type="text" name="maximum"></td>
      </tr>
      <tr>
        <td><input id="button" type="submit" name="add" value="insert"></td>
      </tr>
    </table>

编辑：问题是，第二个表格中的文本居中。可能使用这一行 #tabulka th, td {padding:3px 10px 3px;文本对齐：居中； }，但我不明白为什么。

Answer 1

如果您替换该行来自

#tabulka th, td {padding:3px 10px 3px; text-align:center; }

              to

#tabulka th, #tabulka td {padding:3px 10px 3px; text-align:center; }

下一个表格文本将从左侧而不是中心开始。

这里是演示。 http://jsfiddle.net/kheema/8fEMF/1/

Answer 2

在第一个表中我没有看到 TH 标签...

 #tabulka th, td {padding:3px 10px 3px; text-align:center; }

 #tabulka th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}