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