html - 流体表是否有可能在每个元素之间和外部具有相同的间距？

Question

我得到了一个由几乎没有 CSS 知识的人设计的问题:“让表格中的每一列从表格的左侧、表格的右侧和相邻的元素中均匀填充。”

table 本身应该是流动的；其中包含的每个元素的宽度是不确定的。更糟糕的是，虽然现在有问题的表格有两列，但它们是为了视觉效果，可能会更新为 3-4 列。

我知道 CSS 不支持添加像素和百分比，但是有什么方法可以解决这个问题吗？

我能为此做的最好的草图(无论如何在 GIMP 上):

一组不太有效的表格示例: http://jsfiddle.net/22vmb4gp/2/

table {
    table-layout:fixed;
    width: 100%;    
}
td {
    text-align: center;
    border: 1px solid #FFDDDD;
}
div {
    border: 2px solid black;
    display:inline-block;
    margin: 0 auto;
}

tr:first-child:before,
tr:last-child:after {
    display:table-cell;
    content:'';
    width: 10%;
    border:1px solid #DDFFDD;
}

Answer 1

我不喜欢表格，现在使用表格是一种不好的做法。但是，有一种方法可以仅使用 CSS 来完成您的要求。

这是没有表格的 HTML:

<div class="container">
    <div class="inner">Item 1</div>
    <div class="inner">Item 2</div>
    <div class="inner">Item 3</div>
    <div class="inner">Item 4</div>
    <div class="inner">Item 5</div>
</div>
<div class="container">
    <div class="inner">Item 1</div>
    <div class="inner">Item 2</div>
    <div class="inner">Item 3</div>
    <div class="inner">Item 4</div>
</div>
<div class="container">
    <div class="inner">Item 1</div>
    <div class="inner">Item 2</div>
    <div class="inner">Item 3</div>
</div>
<div class="container">
    <div class="inner">Item 1</div>
    <div class="inner">Item 2</div>
</div>

这是将创建您正在寻找的内容的 CSS:

.container {
    display:flex;
    justify-content: space-around;
    border: 1px solid #FFDDDD;
    margin-bottom:5px;
}
.inner {
    flex: 0 1 auto;
    margin: auto;
    border: 2px solid black;
}

您可以阅读有关 Flex 的更多信息 here .