css - 具有可变宽度列的固定宽度表格

Question

我需要一个固定宽度的表格，其中列的宽度可变，因此取决于它们的内容，但这些内容之间的水平距离相同。

这是我得到的:

-----------------Table Width-----------------
|----Long Content----|---Content---|--More--|

这就是我想要的:

----------------Table Width------------------
|---Long Content---|---Content---|---More---|

请注意内容单元格中减号的数量!当您使用屏幕截图测量列内容之间的空间时，您会注意到它们并不总是完全相同。

这是我的标记:

<ul>
    <li>Long Content</li>
    <li>Content</li>
    <li>More</li>
</ul>

这是我不工作的样式表:

ul {
    display: table;
    width: 600px;
}

li {
    display: table-cell;
    text-align: center;
    border: solid 1px #000;
}

这是我的 jsFiddle:http://jsfiddle.net/ATwqk/12/ .我怎样才能得到想要的结果？

Answer 1

如果我理解正确，您可以尝试在 ul 周围包裹一个固定宽度的 div。然后宽度:100%；在 ul 上，width:50% 在 li 上

http://jsfiddle.net/ATwqk/3/

#wrapper{
        width:500px;
    }
    ul {
        display: table;
        width: 100%;
    }

    li {
        display: table-cell;
        text-align: center;
        border: solid 1px #000;
        width:50%
    }

<div id="wrapper">
<ul>
    <li>Long Contentdsdddddddddddd</li>
    <li>Content</li>
</ul>
</div>