Databases
StackOverflow2013
Postsdbo
POPeriodic table with css
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPeriodic table with css
    text
    copied!<p>Good day!</p> <p>So currently I have a problem in creating a periodic table using only external css file (I'm not allowed to use tag). </p> <p>Here is the sample:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Periodic Table&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="s3372661.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="row_0"&gt; &lt;div id="1" class="element pos_0"&gt; &lt;span class="number"&gt;1&lt;/span&gt; &lt;br&gt; &lt;span class="symbol"&gt;H&lt;/span&gt; &lt;br&gt; &lt;span class="name"&gt;Hydrogen&lt;/span&gt; &lt;br&gt; &lt;span class="molar"&gt;1.00794&lt;/span&gt; &lt;br&gt; &lt;span class="group"&gt;&lt;/span&gt; &lt;br&gt; &lt;/div&gt; &lt;div class="element pos_1"&gt;&lt;/div&gt; &lt;div class="element pos_2"&gt;&lt;/div&gt; &lt;div class="element pos_3"&gt;&lt;/div&gt; &lt;div class="element pos_4"&gt;&lt;/div&gt; &lt;div class="element pos_5"&gt;&lt;/div&gt; &lt;div class="element pos_6"&gt;&lt;/div&gt; &lt;div class="element pos_7"&gt;&lt;/div&gt; &lt;div class="element pos_8"&gt;&lt;/div&gt; &lt;div class="element pos_9"&gt;&lt;/div&gt; &lt;div class="element pos_10"&gt;&lt;/div&gt; &lt;div class="element pos_11"&gt;&lt;/div&gt; &lt;div class="element pos_12"&gt;&lt;/div&gt; &lt;div class="element pos_13"&gt;&lt;/div&gt; &lt;div class="element pos_14"&gt;&lt;/div&gt; &lt;div class="element pos_15"&gt;&lt;/div&gt; &lt;div class="element pos_16"&gt;&lt;/div&gt; &lt;div id="2" class="element pos_17"&gt; &lt;span class="number"&gt;2&lt;/span&gt; &lt;br&gt; &lt;span class="symbol"&gt;He&lt;/span&gt; &lt;br&gt; &lt;span class="name"&gt;Helium&lt;/span&gt; &lt;br&gt; &lt;span class="molar"&gt;4.002602&lt;/span&gt; &lt;br&gt; &lt;span class="group"&gt;Element Noble p&lt;/span&gt; &lt;br&gt; &lt;/div&gt; &lt;/body&gt; &lt;/htmt&gt; </code></pre> <p>and the css file:</p> <pre><code>body { background-color: #FFF; width:960px; display:table; } div { display: table-row; vertical-align: inherit; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 9px; border: 3px solid #FFF; background-color: red; } .element { text-align: center; padding: 10px 5px; display: table-cell; vertical-align: inherit; min-width: 5em; border: 2px #FFF solid; background-color: inherit; } .number { font-size:9px; font-family:Arial, Helvetica, sans-serif; color: white; } .symbol { font-size:20px; font-family:Arial, Helvetica, sans-serif; color: white; font-weight:bold; } .name { font-size:15px; font-family:Arial, Helvetica, sans-serif; color: white; font-style:italic; } .molar { font-size:10px; font-family:Arial, Helvetica, sans-serif; color: white; } .group { font-size:15px; font-family:Arial, Helvetica, sans-serif; color: white; } </code></pre> <p>The problem is how can I make those unwanted block to disappear without using specificity for each block?</p> <p>Such as:</p> <pre><code>#row_0 .element.pos_1 { background-color: white } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload