问题描述
我有一个一维对象数组。我需要在一个包含 3 列的表中显示该数组中的数据。
我为每列分配 1/3rd of 100% width
,因为列数是固定的。
如果我要显示 3 个或更多对象,则一切正常。但是,如果我有 1 或 2 个对象,则列宽会发生变化,列会扩展以适应最大宽度。
Here 是我的代码。我知道到处都有内联 css,这是故意的。请多多包涵。我提供了一个包含 2 个对象的数组和另一个包含 4 个对象的数组,以便您可以看到差异。 我知道我可以为否写一个单独的条件。小于 3 的对象,然后设置特定的宽度,但我希望这可以单独用 CSS 解决。 如果有人能提供帮助,我将不胜感激。
编辑:我已经有一个基于 JS 的解决方案。如果数组少于 3 个对象,我会动态计算表格宽度,如下所示。
let width = '100%';
if (listofPeople.length < 3 && listofPeople.length > 0) {
width = (listofPeople.length * 100) / 3 + '%';
}
这个宽度是这样使用的
appDiv.innerHTML = `
<table width="${width}" border="0">
<tbody>
<td style="width: calc(100% / 3); height: 100%; max-width: calc(100% / 3); padding: 10px;">
data
</td>
</tbody>
</table>
`;
我没有在链接的代码中更新这个解决方案,因为我真的希望有一个 CSS 解决方案。如果有人有任何想法,请告诉我
解决方法
我在这里添加了 2 个变量。 iterator
只是根据剩余的 listOfPeople 计算出任何给定行的 TD 数,而 perc
计算出行的宽度。
const array2 = [
new Map([
['name','Jacqueline M. Goodrich'],['img',''],['department','Marketing'],['location','jhvjb']
]),new Map([
['name','Jacqueline M. Goodrich2'],'frds']
]),'frds']
])
];
const array3 = [
new Map([
['name','frds']
])
]
function doTable(listOfPeople) {
let cardsrows = '';
for (let i = 0; i < listOfPeople.length;) {
let cards = '';
let iterator = Math.min((listOfPeople.length - i),3)
let perc = Math.min(listOfPeople.length,3)
for (let col = 0; col < iterator; col++) {
const record = listOfPeople[i];
const card =
`<td style="border:1px solid #ccc; width: calc(100% / ${perc}); height: 100%; max-width: calc(100% / ${perc}); padding: 10px;">info</td>`;
cards = cards.concat(card);
i++;
}
const row = cards ? `<tr>` + cards + `</tr>` : ``;
cardsrows = cardsrows.concat(row);
}
document.getElementById('appDiv').innerHTML = `
<table width="100%" border="0">
<tbody>
${cardsrows}
</tbody>
</table>
`;
}
<div id='appDiv'></div>
<button onclick='doTable(array2)'>Table for 4</button>
<button onclick='doTable(array3)'>Table for 2</button>