css将table里面的值竖行显示不全

在网页开发中，经常会碰到需要在table表格中展示大量数据的情况。而有时候，表格的列宽有限，导致表格中的值无法完整地显示出来，使用CSS进行竖向显示是一种解决方案。

下面是具体的CSS代码：

    table {
        border-collapse: collapse;
        width: 100%;
    }

    td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
        height: 200px; /* 设置表格高度 */
    }

    td div {
        display: inline-block;
        margin: 0 auto;
        width: 20px; /* 设置每个单元格宽度 */
        height: 100%;
        position: relative;
    }

    td div span {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform-origin: 0 0;
        transform: rotate(-90deg) translateX(-100%);
    }

解释一下这些代码：

• 首先，将table的边框合并，使得表格更加美观。
• 接下来，对table中的每个单元格进行样式设置，包括边框、内边距、水平居中、设置高度。高度的设定是为了在后续的竖直排列中起到重要作用。
• 然后，在每个单元格中添加一个div元素，用来容纳每个值。该div元素设置为内联块级元素，宽度为20px，高度为100%，并设置了一个相对定位。
• 最后，用span元素对值进行竖直排列，并进行定位和旋转操作，使得值能够竖直显示。

在实际应用中，可以根据实际的需求进行修改和调整，达到更好的效果。