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

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

gradle error "Cannot convert the provided notation to a File or URI" -

python - NameError: name 'subprocess' is not defined -