html - How can I make all table cell sizes the same width in css? -
i have assignment creat periodic table of elements. using css, how can make individual cells of table1 , table2 same width instead of being wide text inside them? appreciated. thank time in advance.
table.table1 { border:none; width:75%; margin:auto; } table.table1 td { font-family: arial, helvetica, geneva, swiss, sans-serif; font-size:100%; text-align:center; } table.table2 { border:none; width:75%; margin-left:17.8%; margin-top:20px; } table.table2 td { font-family: arial, helvetica, geneva, swiss, sans-serif; font-size:100%; text-align:center; } table.table3 { border:none; width:30%; margin:auto; } table.table3 td { font-family: arial, helvetica, geneva, swiss, sans-serif; font-size:115%; text-align:left; width:15px; } .biggerbold { font-size:300%; font-weight:bold; } .bigbold { font-size:150%; font-weight:bold; } .bggray { background-color:gray; } .bggreen { background-color:green; } .bgyellow { background-color:yellow; } .bgpink { background-color:#ff99cc; } .bgaqua { background-color:aqua; } .bgorange { background-color:#ff9933; }
<table class="table1"> <caption class="biggerbold">the periodic table of elements</caption> <tr> <td class="bggray">1<br/><span class="bigbold">h</span><br/>hydrogen<br/>1</td> <td></td> <td colspan="10" rowspan="3"> <table class="table3"> <caption class="bigbold">key</caption> <tr> <td class="bggray"></td> <td>alkali metals</td> </tr> <tr> <td class="bggreen"></td> <td>alkaline earth metals</td> </tr> <tr> <td class="bgyellow"></td> <td>transitional metals</td> </tr> <tr> <td class="bgpink"></td> <td>other metals</td> </tr> <tr> <td class="bgaqua"></td> <td>non metals</td> </tr> <tr> <td class="bgorange"></td> <td>noble gases</td> </tr> </table> </td> <td colspan="5"></td> <td class="bgorange">2<br/><span class="bigbold">he</span><br/>helium<br/>4</td> </tr> <tr> <td class="bggray">3<br/><span class="bigbold">li</span><br/>lithium<br/>7</td> <td class="bggreen">4<br/><span class="bigbold">be</span><br/>beryllium<br/>9</td> <td class="bgaqua">5<br/><span class="bigbold">b</span><br/>boron<br/>11</td> <td class="bgaqua">6<br/><span class="bigbold">c</span><br/>carbon<br/>12</td> <td class="bgaqua">7<br/><span class="bigbold">n</span><br/>nitrogen<br/>14</td> <td class="bgaqua">8<br/><span class="bigbold">o</span><br/>oxygen<br/>16</td> <td class="bgaqua">9<br/><span class="bigbold">f</span><br/>fluorine<br/>19</td> <td class="bgorange">10<br/><span class="bigbold">ne</span><br/>neon<br/>20</td> </tr> <tr> <td class="bggray">11<br/><span class="bigbold">na</span><br/>sodium<br/>23</td> <td class="bggreen">12<br/><span class="bigbold">mg</span><br/>magnesium<br/>24</td> <td class="bgpink">13<br/><span class="bigbold">al</span><br/>aluminum<br/>27</td> <td class="bgaqua">14<br/><span class="bigbold">si</span><br/>silicon<br/>28</td> <td class="bgaqua">15<br/><span class="bigbold">p</span><br/>phosphorus<br/>31</td> <td class="bgaqua">16<br/><span class="bigbold">s</span><br/>sulfur<br/>32</td> <td class="bgaqua">17<br/><span class="bigbold">cl</span><br/>chlorine<br/>35</td> <td class="bgorange">18<br/><span class="bigbold">ar</span><br/>argon<br/>40</td> </tr> <tr> <td class="bggray">19<br/><span class="bigbold">k</span><br/>potassium<br/>39</td> <td class="bggreen">20<br/><span class="bigbold">ca</span><br/>calcium<br/>40</td> <td class="bgyellow">21<br/><span class="bigbold">sc</span><br/>scandium<br/>45</td> <td class="bgyellow">22<br/><span class="bigbold">ti</span><br/>titanium<br/>59</td> <td class="bgyellow">23<br/><span class="bigbold">v</span><br/>vanadium<br/>51</td> <td class="bgyellow">24<br/><span class="bigbold">cr</span><br/>chromium<br/>52</td> <td class="bgyellow">25<br/><span class="bigbold">mn</span><br/>manganese<br/>55</td> <td class="bgyellow">26<br/><span class="bigbold">fe</span><br/>iron<br/>56</td> <td class="bgyellow">27<br/><span class="bigbold">co</span><br/>cobalt<br/>59</td> <td class="bgyellow">28<br/><span class="bigbold">ni</span><br/>nickel<br/>59</td> <td class="bgyellow">29<br/><span class="bigbold">cu</span><br/>copper<br/>64</td> <td class="bgyellow">30<br/><span class="bigbold">zn</span><br/>zinc<br/>65</td> <td class="bgpink">31<br/><span class="bigbold">ga</span><br/>gallium<br/>70</td> <td class="bgpink">32<br/><span class="bigbold">ge</span><br/>germanium<br/>73</td> <td class="bgaqua">33<br/><span class="bigbold">as</span><br/>arsenic<br/>75</td> <td class="bgaqua">34<br/><span class="bigbold">se</span><br/>selenium<br/>79</td> <td class="bgaqua">35<br/><span class="bigbold">br</span><br/>bromine<br/>80</td> <td class="bgorange">36<br/><span class="bigbold">kr</span><br/>krypton<br/>84 <tr> <td class="bggray">37<br/><span class="bigbold">rb</span><br/>rubidium<br/>85</td> <td class="bggreen">38<br/><span class="bigbold">sr</span><br/>strontium<br/>88</td> <td class="bgyellow">39<br/><span class="bigbold">y</span><br/>yttrium<br/>89</td> <td class="bgyellow">40<br/><span class="bigbold">zr</span><br/>zirconium<br/>91</td> <td class="bgyellow">41<br/><span class="bigbold">nb</span><br/>niobium<br/>93</td> <td class="bgyellow">42<br/><span class="bigbold">mo</span><br/>molybdenum<br/>96</td> <td class="bgyellow">43<br/><span class="bigbold">tc</span><br/>technetium<br/>98</td> <td class="bgyellow">44<br/><span class="bigbold">ru</span><br/>ruthenium<br/>101</td> <td class="bgyellow">45<br/><span class="bigbold">rh</span><br/>rhodium<br/>103</td> <td class="bgyellow">46<br/><span class="bigbold">pd</span><br/>palladium<br/>106</td> <td class="bgyellow">47<br/><span class="bigbold">ag</span><br/>silver<br/>108</td> <td class="bgyellow">48<br/><span class="bigbold">cd</span><br/>cadmium<br/>112</td> <td class="bgpink">49<br/><span class="bigbold">in</span><br/>indium<br/>115</td> <td class="bgpink">50<br/><span class="bigbold">sn</span><br/>tin<br/>119</td> <td class="bgpink">51<br/><span class="bigbold">sb</span><br/>antimony<br/>122</td> <td class="bgaqua">52<br/><span class="bigbold">te</span><br/>tellurium<br/>128</td> <td class="bgaqua">53<br/><span class="bigbold">i</span><br/>iodine<br/>127</td> <td class="bgorange">54<br/><span class="bigbold">xe</span><br/>xenon<br/>131</td> </tr> <tr> <td class="bggray">55<br/><span class="bigbold">cs</span><br/>cesium<br/>133</td> <td class="bggreen">56<br/><span class="bigbold">ba</span><br/>barium<br/>137</td> <td class=""></td> <td class="bgyellow">72<br/><span class="bigbold">hf</span><br/>hafnium<br/>178</td> <td class="bgyellow">73<br/><span class="bigbold">ta</span><br/>tantalum<br/>181</td> <td class="bgyellow">74<br/><span class="bigbold">w</span><br/>tungsten<br/>184</td> <td class="bgyellow">75<br/><span class="bigbold">re</span><br/>rhenium<br/>186</td> <td class="bgyellow">76<br/><span class="bigbold">os</span><br/>osmium<br/>190</td> <td class="bgyellow">77<br/><span class="bigbold">ir</span><br/>iridium<br/>192</td> <td class="bgyellow">78<br/><span class="bigbold">pt</span><br/>platinum<br/>195</td> <td class="bgyellow">79<br/><span class="bigbold">au</span><br/>gold<br/>197</td> <td class="bgyellow">80<br/><span class="bigbold">hg</span><br/>mercury<br/>201</td> <td class="bgpink">81<br/><span class="bigbold">tl</span><br/>thallium<br/>204</td> <td class="bgpink">82<br/><span class="bigbold">pb</span><br/>lead<br/>207</td> <td class="bgpink">83<br/><span class="bigbold">bi</span><br/>bismuth<br/>209</td> <td class="bgpink">84<br/><span class="bigbold">po</span><br/>polonium<br/>209</td> <td class="bgaqua">85<br/><span class="bigbold">at</span><br/>astatine<br/>210</td> <td class="bgorange">86<br/><span class="bigbold">rn</span><br/>radon<br/>222</td> </tr> <tr> <td class="bggray">87<br/><span class="bigbold">fr</span><br/>francium<br/>223</td> <td class="bggreen">88<br/><span class="bigbold">ra</span><br/>radium<br/>226</td> <td class=""></td> <td class="bgyellow">104<br/><span class="bigbold">rf</span><br/>rutherfordium<br/>263</td> <td class="bgyellow">105<br/><span class="bigbold">db</span><br/>dubnium<br/>268</td> <td class="bgyellow">106<br/><span class="bigbold">sg</span><br/>seaborgium<br/>271</td> <td class="bgyellow">107<br/><span class="bigbold">bh</span><br/>bohrium<br/>270</td> <td class="bgyellow">108<br/><span class="bigbold">hs</span><br/>hassium<br/>270</td> <td class="bgyellow">109<br/><span class="bigbold">mt</span><br/>meitnerium<br/>278</td> <td class="bgyellow">110<br/><span class="bigbold">ds</span><br/>darmstadtium<br/>281</td> <td class="bgyellow">111<br/><span class="bigbold">rg</span><br/>roentgenium<br/>281</td> <td class="bgyellow">112<br/><span class="bigbold">cn</span><br/>copernicium<br/>285</td> <td class="bgpink">113<br/><span class="bigbold">uut</span><br/>ununtrium<br/>286</td> <td class="bgpink">114<br/><span class="bigbold">fl</span><br/>flerovium<br/>289</td> <td class="bgpink">115<br/><span class="bigbold">uup</span><br/>ununpentium<br/>289</td> <td class="bgpink">116<br/><span class="bigbold">lv</span><br/>livermorium<br/>293</td> <td class="bgaqua">117<br/><span class="bigbold">uus</span><br/>ununseptium<br/>294</td> <td class="bgorange">118<br/><span class="bigbold">uuo</span><br/>ununoctium<br/>294</td> </tr> </table> <table class="table2"> <tr> <td></td> <td></td> <td></td> <td class="bgyellow">57<br/><span class="bigbold">la</span><br/>lanthanum<br/>139</td> <td class="bgyellow">58<br/><span class="bigbold">ce</span><br/>cerium<br/>140</td> <td class="bgyellow">59<br/><span class="bigbold">pr</span><br/>praseodymium<br/>141</td> <td class="bgyellow">60<br/><span class="bigbold">nd</span><br/>neodymium<br/>144</td> <td class="bgyellow">61<br/><span class="bigbold">pm</span><br/>promethium<br/>145</td> <td class="bgyellow">62<br/><span class="bigbold">sm</span><br/>samarium<br/>150</td> <td class="bgyellow">63<br/><span class="bigbold">eu</span><br/>europium<br/>152</td> <td class="bgyellow">64<br/><span class="bigbold">gd</span><br/>gadolinium<br/>157</td> <td class="bgyellow">65<br/><span class="bigbold">tb</span><br/>terbium<br/>159</td> <td class="bgyellow">66<br/><span class="bigbold">dy</span><br/>dysprosium<br/>163</td> <td class="bgyellow">67<br/><span class="bigbold">ho</span><br/>holmium<br/>165</td> <td class="bgyellow">68<br/><span class="bigbold">er</span><br/>erbium<br/>167</td> <td class="bgyellow">69<br/><span class="bigbold">tm</span><br/>thulium<br/>169</td> <td class="bgyellow">70<br/><span class="bigbold">yb</span><br/>ytterbium<br/>173</td> <td class="bgyellow">71<br/><span class="bigbold">lu</span><br/>lutetium<br/>175</td> </tr> <tr> <td></td> <td></td> <td></td> <td class="bgyellow">89<br/><span class="bigbold">ac</span><br/>actinium<br/>227</td> <td class="bgyellow">90<br/><span class="bigbold">th</span><br/>thorium<br/>232</td> <td class="bgyellow">91<br/><span class="bigbold">pa</span><br/>protactinium<br/>231</td> <td class="bgyellow">92<br/><span class="bigbold">u</span><br/>uranium<br/>238</td> <td class="bgyellow">93<br/><span class="bigbold">np</span><br/>neptunium<br/>237</td> <td class="bgyellow">94<br/><span class="bigbold">pu</span><br/>plutonium<br/>244</td> <td class="bgyellow">95<br/><span class="bigbold">am</span><br/>americium<br/>243</td> <td class="bgyellow">96<br/><span class="bigbold">cm</span><br/>curium<br/>247</td> <td class="bgyellow">97<br/><span class="bigbold">bk</span><br/>berkelium<br/>247</td> <td class="bgyellow">98<br/><span class="bigbold">cf</span><br/>californium<br/>251</td> <td class="bgyellow">99<br/><span class="bigbold">es</span><br/>einsteinium<br/>252</td> <td class="bgyellow">100<br/><span class="bigbold">fm</span><br/>fermium<br/>257</td> <td class="bgyellow">101<br/><span class="bigbold">md</span><br/>mendelevium<br/>258</td> <td class="bgyellow">102<br/><span class="bigbold">no</span><br/>nobelium<br/>259</td> <td class="bgyellow">103<br/><span class="bigbold">lr</span><br/>lawrencium<br/>262</td> </tr> </table>
specify width
, max-width
, , min-width
table cells, same value 3 properties.
Comments
Post a Comment