相关疑难解决方法(0)

我遇到的问题是html表溢出了它的父容器.我在这里设置了一个示例jsfiddle来说明问题.

如何强制标题文本和表格单元格文本以适合其容器的方式包装？我更喜欢仅CSS的方法,但如果绝对必要,我也愿意使用Javascript(或jQuery).

这个问题已被多次询问,但所提供的答案似乎都没有帮助我:

在这里看到这个:http://jsfiddle.net/BlaM/bsQNj/2/

我有一个"动态"(基于百分比)布局,有两列.

.grid {
    width: 100%;
    box-sizing: border-box;
}
.grid > * {
    box-sizing: border-box;
    margin: 0;
}
.grid .col50 {
    padding: 0 1.5%;
    float: left;
    width: 50%;
}

在每个列中,我都有一个应该使用整列宽度的表.

.data-table {
    width: 100%;
}
.data-table td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

我的问题是该表中的某些列具有需要截断的内容以适合表的给定宽度.但这并没有发生.我得到两张相互重叠的桌子.

要求:

• 需要以百分比为基础.我不能设置绝对尺寸.
• 每行的高度不得超过一个文本行(如果我删除white-space:nowrap会发生这种情况)
• 必须适用于Chrome,Firefox和Internet Explorer 8+
• 无法在彼此下方显示表格,因为打印时必须将其放在一张纸上.

我尝试了什么:

• 在里面并使用宽度和溢出.一无所获.
• "display:table;" 在包含div - 而不是有两列,表格显示在彼此之下
• "table-layout:fixed;" - 强制所有列具有相同的宽度
• 我知道列2 + 3总共有30%的宽度所以我试图手动将第1列设置为70% - 没有改变任何东西
• 内容中的零宽度空间 - 没有改变任何东西,可能是由于白色空间:nowrap;

相关问题:

• 表宽度超出容器的宽度
• 如何防止HTML表格拉伸
• HTML CSS如何阻止表格单元格扩展
• 表溢出Div

鉴于此示例(http://jsfiddle.net/A8gHg/,下面的代码),请尝试使窗口变小,以便示例的大小被压缩.

<div style="background-color:blue">
    <table style="width:100%">
        <tr>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
            <td>
                <input type="text" style="width:150px"/>
            </td>
        </tr>
    </table>
</div>

您将注意到文本框(正确)不会换行到新行,因为它们位于单个<td>s中.

然而,div由蓝色表示的包含物不会完全包裹桌子.

如何使包含div完全包含孩子table？

我有一个表不应超过父div宽度的宽度,这怎么能只在CSS中解决？我在这里有一个例子

的jsfiddle

HTML

<div id="parent">
    <table id="child2">
        <tr>
            <td>Hi! andgds;lfgjl;dksfjglkdfgjldsfk;gjdlf;kgjdlfkgjdflkgjdl;fksgjdl;ksfgjlkdfsjglkdfsjglkdsfjglkdjsfgkljdsflkgjdflksgjl;kdsfd it's not working!</td>
            <td>Hi! andgds;lfgjl;dksfjglkdfgjldsfk;gjdlf;kgjdlfkgjdflkgjdl;fksgjdl;ksfgjlkdfsjglkdfsjglkdsfjglkdjsfgkljdsflkgjdflksgjl;kdsfd it's not working!</td>            
        </tr>
    </table>

CSS

#parent {
    border: 3px solid #f0f;
    width: 600px;       
}
table#child2 {    
    background: cyan;        
}
td{
    border: 2px solid #666;    
}