Html 表中的加载器<；td>；

我试图把加载器放在一张桌子里，但它不起作用。问题是，当我将div放入td时，表格格式不起作用

当我检查元素时，div在表外

.loader{
背景：#000；
背景：径向梯度（#222，#000）；
底部：0；
左：0；
溢出：隐藏；
位置：固定；
右：0；
排名：0；
z指数：99999；
}
.装载机内部{
高度：60px；
左：0；
位置：绝对位置；
右：0；
宽度：100px；
}
.装载机线包装{
动画：旋转2000ms立方贝塞尔（.175、.885、.32、1.275）无穷大；
框大小：边框框；
高度：50px；
左：0；
溢出：隐藏；
位置：绝对位置；
排名：0；
变换原点：50%100%；
宽度：100px；
}
.装载机生产线{
边框：4px实心透明；
边界半径：100%；
框大小：边框框；
高度：100px；
左：0；
保证金：0自动；
位置：绝对位置；
右：0；
排名：0；
宽度：100px；
}
.加载器换行：第n个子项（1）{
动画延迟：-50ms；
}
.加载器换行：第n个子项（2）{
动画延迟：-100ms；
}
.加载器换行：第n个子项（3）{
动画延迟：-150ms；
}
.加载器换行：第n个子项（4）{
动画延迟：-200ms；
}
.加载器换行：第n个子项（5）{
动画延迟：-250ms；
}
.加载器换行：第n个子项（1）.加载器换行{
边框颜色：hsl（0,80,60%）；
高度：90px；
宽度：90px；
顶部：7px；
}
.加载器换行：第n个子项（2）.加载器换行{
边框颜色：hsl（60,80%，60%）；
高度：76px；
宽度：76px；
顶部：14px；
}
.加载器换行：第n个子项（3）.加载器换行{
边框颜色：hsl（120,80,60%）；
高度：62px；
宽度：62px；
顶部：21px；
}
.加载器换行：第n个子项（4）.加载器换行{
边框颜色：hsl（180,80,60%）；
高度：48px；
宽度：48px；
顶部：28px；
}
.加载器换行：第n个子项（5）.加载器换行{
边框颜色：hsl（240,80,60%）；
高度：34px；
宽度：34px；
顶部：35px；
}
@关键帧旋转{
0%, 15% {
变换：旋转（0）；
}
100% {
变换：旋转（360度）；
}
}

1.

如果需要在

中包含加载图形，则不应使用固定定位

这里有一个解决方案。删除固定定位和相关属性。为

.loader

设置相对定位以及高度和宽度

.loader{
位置：相对位置；
背景：#000；
背景：径向梯度（#222，#000）；
溢出：隐藏；
z指数：99999；
宽度：100px；
高度：100px；
}
.loader内部{}
.装载机线包装{
动画：旋转2000ms立方贝塞尔（.175、.885、.32、1.275）无穷大；
框大小：边框框；
高度：50px；
左：0；
溢出：隐藏；
位置：绝对位置；
排名：0；
变换原点：50%100%；
宽度：100px；
}
.装载机生产线{
边框：4px实心透明；
边界半径：100%；
框大小：边框框；
高度：100px；
左：0；
保证金：0自动；
位置：绝对位置；
右：0；
排名：0；
宽度：100px；
}
.加载器换行：第n个子项（1）{
动画延迟：-50ms；
}
.加载器换行：第n个子项（2）{
动画延迟：-100ms；
}
.加载器换行：第n个子项（3）{
动画延迟：-150ms；
}
.加载器换行：第n个子项（4）{
动画延迟：-200ms；
}
.加载器换行：第n个子项（5）{
动画延迟：-250ms；
}
.加载器换行：第n个子项（1）.加载器换行{
边框颜色：hsl（0,80,60%）；
高度：90px；
宽度：90px；
顶部：7px；
}
.加载器换行：第n个子项（2）.加载器换行{
边框颜色：hsl（60,80%，60%）；
高度：76px；
宽度：76px；
顶部：14px；
}
.加载器换行：第n个子项（3）.加载器换行{
边框颜色：hsl（120,80,60%）；
高度：62px；
宽度：62px；
顶部：21px；
}
.加载器换行：第n个子项（4）.加载器换行{
边框颜色：hsl（180,80,60%）；
高度：48px；
宽度：48px；
顶部：28px；
}
.加载器换行：第n个子项（5）.加载器换行{
边框颜色：hsl（240,80,60%）；
高度：34px；
宽度：34px；
顶部：35px；
}
@关键帧旋转{
0%, 15% {
变换：旋转（0）；
}
100% {
变换：旋转（360度）；
}
}
表td{
边框：1px实心#CCC；
}

1.

将id或类添加到加载程序的父级

td

，并将其位置设置为

相对

。将装载机的位置设置为绝对位置

#装载机容器{
位置：相对位置；
高度：100px；
宽度：100px；
}
.加载器{
背景：#000；
背景：径向梯度（#222，#000）；
底部：0；
左：0；
溢出：隐藏；
位置：绝对位置；
右：0；
排名：0；
z指数：99999；
}
.装载机内部{
高度：60px；
左：0；
位置：绝对位置；
右：0；
宽度：100px；
}
.装载机线包装{
动画：旋转2000ms立方贝塞尔（.175、.885、.32、1.275）无穷大；
框大小：边框框；
高度：50px；
左：0；
溢出：隐藏；
位置：绝对位置；
排名：0；
变换原点：50%100%；
宽度：100px；
}
.装载机生产线{
边框：4px实心透明；
边界半径：100%；
框大小：边框框；
高度：100px；
左：0；
保证金：0自动；
位置：绝对位置；
右：0；
排名：0；
宽度：100px；
}
.加载器换行：第n个子项（1）{
动画延迟：-50ms；
}
.加载器换行：第n个子项（2）{
动画延迟：-100ms；
}
.加载器换行：第n个子项（3）{
动画延迟：-150ms；
}
.加载器换行：第n个子项（4）{
动画延迟：-200ms；
}
.加载器换行：第n个子项（5）{
动画延迟：-250ms；
}
.加载器换行：第n个子项（1）.加载器换行{
边框颜色：hsl（0,80,60%）；
高度：90px；
宽度：90px；
顶部：7px；
}
.装载机换行：