我正在创建元素周期表。我将所有文本在单元格内居中对齐。我需要每个单元格(原子序数)中的顶部数字向左对齐，其他 3 个元素保持居中。我曾尝试在 CSS 中将 span 与 .alignLeft 类一起使用，但没有成功。任何帮助或建议将不胜感激。
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;
min-width:100px;
max-width:100px;
width:100px;
}
table.table2
{
border:none;
width:75%;
margin-left:.8%;
margin-top:20px;
}
table.table2 td
{
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size:100%;
text-align:center;
min-width:100px;
max-width:100px;
width:100px;
}
table.table3
{
border:none;
width:30%;
margin:auto;
}
table.table3 td
{
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size:125%;
text-align:left;
min-width:100px;
max-width:100px;
width:100px;
}
.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;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Periodic Table</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<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>
</body>
</html>最佳答案
尝试像这样将这些原子序数包装在一个跨度中:
<span class="atomic">1</span>
删除 <br>和 <span class="bigBold"> 之间的标签
然后添加这个类:
.atomic {
text-align:left;
display:block;
}
关于html - 如何为表格单元格中的文本提供不同的对齐方式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29109954/