相关疑难解决方法(0)

我一直在用s和s word-wrap: break-word包装文本.但是,它似乎不适用于表格单元格.我有一个表设置,有一行和两列.列中的文本虽然使用上面的样式,但不会换行.它会使文本超出单元格的边界.这种情况发生在Firefox,谷歌浏览器和Internet Explorer上.divspanwidth:100%word-wrap

以下是源代码:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

上面的长词大于我的页面的边界,但它不会破坏上面的HTML.我已经尝试了以下建议加入text-wrap:suppress和text-wrap:normal,但也有帮助.

<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

以上不起作用.如何使用百分比设置表格单元格的最大宽度？

我希望有一个表可以在列中伸展但我在css中的最小和最大宽度有点麻烦.

关于它是如何工作的似乎也有一些相互矛盾的答案:

• 最小/最大宽度应该工作:防止重叠表td宽度的文本
• 最小/最大宽度不受支持:表属性的最小宽度和最大高度

我想有以下内容

table{
   width:100%;
}
.a, .b, .c
{
    background-color: red;
}
.a
{
    min-width: 10px;
    max-width: 20px;
}
.b
{
    min-width: 40px;
    max-width: 45px;
}
.c
{
}

<table>
    <tr>
        <td class="a">A</td>
        <td class="b">B</td>
        <td class="c">C</td>
    </tr>
</table>

有没有办法在没有javascript的情况下实现这一点(即用表格约束拉伸列)？

• 我只需要这个就可以使用CSS3 + HTML5
• 没有扩展的东西的jsfiddle:http://jsfiddle.net/4b3RZ/10/
• 如果我只在列上设置最小宽度,我得到一个比例拉伸:http://jsfiddle.net/4b3RZ/8/

下面是一些实际为某些不同的css设置呈现的内容表: