Question

这是我的代码：http://jsfiddle.net/spadez/mVX93/19/

#my-table{width:100%;border-collapse:collapse;} /*or whatever width you want*/
#my-table td{width:2000px;padding:4px;border:1px solid #000;vertical-align:top;} /*something big or 100%*/

我试图这样做，无论有多少列，每一列的宽度相等。但是，这种方法应该工作，但它没有，我们可以看到一个显然更大，因为它有更大的内容。

可以这样做，而无需为列数指定特定的CSS吗？

Answer 1

在表格上设置table-layout:fixed，并移除您在td上设置的固定宽度。

<强> UPDATED FIDDLE

#my-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed
}

#my-table td{
    padding:4px;
    border:1px solid #000;
    vertical-align:top;
}

Answer 2

只需使用：

Demo Fiddle

#my-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed
}

#my-table td{
    padding:4px;
    border:1px solid #000;
    vertical-align:top;
    word-break:break-word; /* <-- ensure the line of dots can be broken */
}

More on word-break from MDN

word-break CSS属性用于指定如何（或如果）中断在单词中划线。

You may also want to add word-wrap:break-word;

自动换行CSS属性用于指定是否浏览器可能会破坏单词内的行以防止溢出（in 换句话说，强制包装）当一个其他牢不可破的字符串是太长了，无法放入其收纳盒中。

桌子上的平等列

2 个答案:

Demo Fiddle