表子动态宽度[重复]

Question

这个问题在这里已有答案：

• How to make a table with equal column widths in CSS? 3回答

我有一个问题，使用display:table-cell或元素<td>本身归因于元素的响应宽度，我有一个父元素<div class="parent">，下面写的几个孩子

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

并编写了几行css代码，如下所示

.parent {
    display: table;
    width: 100%;
    border-collapse: collapse;
}
.parent .child {
    display: table-cell;
    width : 100%;
    padding: 5px;
}

问题是，第一个孩子将有100％的父宽度，其他两个得到0％的宽度，我试图改变和更改像这样的CSS代码

.parent .child {
    display: table-cell;
    width : 33%;
    padding: 5px;
}

它确实工作得很好，但我真正想要的是根据孩子的数量来划分父母的宽度，我的意思是它不是静态的，有时3个有时5个等等。

也许我可以使用js elementParent.childElementCount计算孩子的数量，并使用JavaScript将100％的孩子的数量分配到彼此的子宽度，但是如果我只使用css怎么办？

谢谢你的任何纠正。

Answer 1

你可以在子div'auto'中应用宽度

 .parent .child {
      display: table-cell;
      width : auto;
      padding: 5px;
                }

如果这符合您的要求，请告诉我

Answer 2

添加以下内容：

.parent {
    ...
  table-layout: fixed;
}
.parent .child {
    ...
  overflow-x: hidden;
  word-break: break-word;
}

这种组合使“表”均匀地分布每个“单元”的宽度。添加到演示中的是一些JavaScript，它添加了额外的单元格来演示前面描述的行为。

---

演示

document.querySelector('button').onclick = addCell;

function addCell(e) {
  var table = document.querySelector('.parent');
  table.insertAdjacentHTML('beforeend', `
    <div class="child">XX</div>`);
}

.parent {
  display: table;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid grey;
  table-layout: fixed;
}

.parent .child {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
  overflow-x: hidden;
  word-break: break-word;
}

button {
  float: right
}

<div class="parent">
  <div class="child">XXXXXXXXXXXXXXXXXXX</div>
  <div class="child">XX</div>
  <div class="child">XX</div>
</div>

<button>Add Cell</button>