Frage

I have a problem, that I'm using table template from web, and it's just CSS and html.. So I insert CSS to my CSS for website.. The table has set id as "tabulka", so in CSS its #tabulka etc.... Everything works fine till I made second table on that page, which has got no id assigned but it is using CSS from id "tabulka"...

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>

edit: the problem is, that the text in second table is centered.. Probably using this line #tabulka th, td {padding:3px 10px 3px; text-align:center; }, but I don't understand why.

War es hilfreich?

Lösung

if you replace the line from

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

              to

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

the next table text will start from left instead of center.

Here is the Demo. http://jsfiddle.net/kheema/8fEMF/1/

Andere Tipps

In the first table I dont see TH tags...

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

 #tabulka th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top