Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 如何在表格单元格中指定不同对齐方式的文本?_Html_Css_Html Table - Fatal编程技术网

Html 如何在表格单元格中指定不同对齐方式的文本?

Html 如何在表格单元格中指定不同对齐方式的文本?,html,css,html-table,Html,Css,Html Table,我正在创建元素周期表。我将所有文本在单元格内对齐,居中对齐。我需要每个单元格中的顶部数字(原子序数)向左对齐,其他3项保持居中。我曾尝试在CSS中使用span和.alignLeft类,但没有成功。如有任何帮助或建议,将不胜感激 table.table1 { 边界:无; 宽度:75%; 保证金:自动; } 表1.1 td { 字体系列:Arial,Helvetica,日内瓦,瑞士,无衬线; 字体大小:100%; 文本对齐:居中; 最小宽度:100px; 最大宽度:100px; 宽度:100px;

我正在创建元素周期表。我将所有文本在单元格内对齐,居中对齐。我需要每个单元格中的顶部数字(原子序数)向左对齐,其他3项保持居中。我曾尝试在CSS中使用span和.alignLeft类,但没有成功。如有任何帮助或建议,将不胜感激

table.table1
{
边界:无;
宽度:75%;
保证金:自动;
}
表1.1 td
{
字体系列:Arial,Helvetica,日内瓦,瑞士,无衬线;
字体大小:100%;
文本对齐:居中;
最小宽度:100px;
最大宽度:100px;
宽度:100px;
}
表1.2
{
边界:无;
宽度:75%;
左边缘:.8%;
边缘顶部:20px;
}
表2.2 td
{
字体系列:Arial,Helvetica,日内瓦,瑞士,无衬线;
字体大小:100%;
文本对齐:居中;
最小宽度:100px;
最大宽度:100px;
宽度:100px;
}
表3.3
{
边界:无;
宽度:30%;
保证金:自动;
}
表4.3 td
{
字体系列:Arial,Helvetica,日内瓦,瑞士,无衬线;
字体大小:125%;
文本对齐:左对齐;
最小宽度:100px;
最大宽度:100px;
宽度:100px;
}
比格博尔德先生
{
字体大小:300%;
字体大小:粗体;
}
比格博尔德先生
{
字体大小:150%;
字体大小:粗体;
}
格雷先生
{
背景颜色:灰色;
}
格林先生
{
背景颜色:绿色;
}
.黄色
{
背景颜色:黄色;
}
.BG粉红色
{
背景色:#FF99CC;
}
bgAqua先生
{
背景色:浅绿色;
}
B.橙色
{
背景色:#FF9933;
}

元素周期表
元素周期表
1


1 钥匙 碱金属 碱土金属 过渡金属 其他金属 非金属 惰性气体 2


4 3


7 4


9 5
B

11 6


12 7


14 8


16 9


19 10


20 11


23 12


24 13


27 14


28 15
P

31 16


32 17氯


35 18


40 19


39 20


40 21
Sc

45 22钛


59 23


51 24


52 25


55 26


56 27钴

59 28


59 29铜


64 30


65 31


70 32


73 33


75 34


79 35
br

80 36


84 37


85 38


88 39


89 40


91 41


93 42


96 43
Tc

98 44


101 45铑 46


106 47银


108 48


112 铟中的49

115 50锡


119 51


122 52


128 53


127 54


131 55


133 56


137 72


178 73


181 74


184 75


186 76


190 77


192 78铂


195 79


197 80


201 81


204 82


207 83


209 84
Po

209 85

阿斯汀
210 86


222 87
Fr
法郎
223 88


226 104
Rf
卢瑟福金
263 105
分贝
杜宾厄姆
268 106
Sg
海博尔金
271 107
Bh
博里姆
270 108
Hs
哈桑
270 109
Mt
小孢子虫
278 110
Ds
达姆斯塔迪姆
281 111
Rg
伦琴
281 112
Cn
哥白尼 113
受测试单元
非中心
286 114
Fl
Flerovium
289 115
Uup
联合国大学
289 116
Lv
肝脏
293 117
Uus
非最佳
294 118
uuuo
unonotium
294 57


139 58


140 59
Pr

141 60


144 61
Pm
异丙醇
145 62


150 63


152 64
Gd

157 65


159 66


163 67


165 68
Er

167 69
Tm

169 70


173 71
Lu

175 89
Ac

227 90


232 91
Pa
前肌动蛋白
231 92


238 93
Np

237 94


244 95
Am

243 96
厘米

247 97
Bk
伯克利厄姆
247 98
Cf
加利福尼亚
251 99
Es
爱因斯坦
252 100
Fm
Fermium
257 101
Md
门捷列维
258 102

诺贝尔奖
259 103
Lr
劳伦西亚
262
您需要一种方法来选择要更改的元素。例如,如果顶部数字需要向左移动,可以在其周围放置一个跨距,并相应地设置样式。不幸的是,我看不到任何方法可以快速地将类添加到一个对象中以获得所需的结果,因为没有任何特定的样式可以不影响顶部(数字)和底部项目。

span不是块元素。使用div或设置display:block作为跨度。

尝试将这些原子数包装在跨度中,如下所示:

<span class="atomic">1</span>
.atomic {
    text-align:left;   
    display:block;
}