CSS:如何在表格中的td背景中制作百分比栏

Question

我正在尝试制作一个订单簿小部件。我在codesandbox上模仿这个例子，其中它在td中有一个span和position: relative，在percent和div中有"位置set to绝对值"，然后它相应地动态设置宽度。

代码就像这个

td span {
position: relative;
z-index: 2;
}
table.Asks .percent {
background-color: #fae9f1;
z-index: 0;
}
table.Bids .percent {
background-color: #f1f9e8;
}
td .percent {
position: absolute;
top: 0;
bottom: 0;
right: 0;
}

所以我也试着这么做。这是我所做的一个现场演示。问题是，似乎所有的条形图都是垂直显示的，而不是水平显示的。我搞不清楚那里出了什么问题。

Answer 1

您的td缺少position: relative;，因此绝对定位元素不会相对于定位

table .price {
position: relative;
color: red;
}

沙箱：https://codesandbox.io/s/recursing-keldysh-wj3jd?file=/src/styles.css