表上的相等列答案

【问题标题】：Equal columns on table表上的相等列
【发布时间】：2014-04-29 17:52:21
【问题描述】：

这是我的代码：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？

【问题讨论】：

你试过在桌子上设置table-layout:fixed吗？
你必须使用table. cs 我发现了另一种方法，你的内容不会流出。检查下面的链接stackoverflow.com/questions/20375288/…
不一定是表格，但越兼容越好

标签： html css

【解决方案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;
}

【讨论】：

这是一个很好的解决方案，但无论如何是否可以阻止文本进入下一个单元格，例如
这样的东西可能很好，可惜它只是 css3 虽然jsfiddle.net/spadez/mVX93/25
我更新了小提琴 - 溢出的文本是由它们之间没有空格的点引起的，使它成为一个非常宽的词 - 这通常不会发生（可能除了长网址）
@Kunsang 根据我的回答

【解决方案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;

word-wrap CSS 属性用于指定是否浏览器可能会在单词中换行以防止溢出（在换句话说，强制换行）当一个原本牢不可破的字符串是太长了，装不下它的包含框。

【讨论】：