表格栏不支持相对填充吗？

Question

我正在尝试使用html表生成报告。我希望第一列的左侧填充12％。设置此填充会导致列重叠，即使有很多可用空间也是如此：

Example：

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

table th,
table td {
    box-sizing: border-box;
}

table td:first-child,
table th:first-child {
    padding-left: 12%;
}

使用固定的填充或使用宽度为12％的空列都可以正常工作。调整浏览器窗口大小后，该表也可以正确显示。

有人知道这里发生了什么吗？

Answer 1

这是因为box model。

  

相对于宽度计算百分比   生成的框的包含框。如果包含块的宽度   取决于此元素，则结果布局在CSS中未定义   2.1。

Answer 2

很明显，较小的屏幕上没有足够的空间，这就是为什么您的文本被推出单元格的原因。添加一个指定宽度的空单元格，并将其用作间隔符。 像这样：

<tr>
    <th class="spacer"></th>
    <th class="col-left first">Rank</th>
    <th class="col-left">Name</th>
    <th class="col-right">A</th>
    <th class="col-right">B</th>
    <th class="col-right">C</th>
    <th class="col-right">D</th>
    <th class="col-right">E</th>
    <th class="col-right">F</th>
    <th class="col-right">G</th>
    <th class="col-right">Sum</th>
</tr> 

.spacer {
  width: 20px;
}

Answer 3

添加：

  

宽度：

或

  

最小宽度：

css的属性

setInterval(changeSlide, 2000);

function changeSlide() {
    var next, prev, slideCount, currentSlide, slideDirection;
    next = document.getElementById('next-slide');
    prev = document.getElementById('prev-slide');
    slideCount = document.getElementById('slider-dots').childNodes.length;
    currentSlide = 1;
    slideDirection = 1;

    if (slideDirection === 1) {
        next.click();
        currentSlide++;
        if (currentSlide === slideCount) {
            slideDirection = -1;
        }
    }

    if (slideDirection === -1) {
        prev.click();
        currentSlide--;
        if (currentSlide === 1) {
            slideDirection = 1;
        }
    }
}

<th class="col-left first" id="space">Rank</th>