无法在chrome浏览器的{div}中包含表格

时间:2015-05-10 03:48:54

标签: html css google-chrome

试图在div中包含一个表,以使表的宽度不超过包含DIV的宽度。

该表有一行,有两个元素。第二个元素是固定长度,第一个元素应该包装文本,以使总表宽度不超过div的宽度。

以下代码(jsfiddle)不适用于Chrome浏览器(40.0.2214.111(64位)),但它似乎适用于Firefox浏览器(29.0)。知道如何使它适用于两者?谢谢。

<html>
  <body>too long, code is in jsfiddle</body>
</html>

2 个答案:

答案 0 :(得分:1)

您使用pre标签来维护数据的格式,而不是使用表格(也就是表格内的表格)。

你的问题将通过table-layout:fixed;来解决,但是当你在表中使用pre和div(用span替换它)时,你必须对其进行修改,以使其正常工作。我已经删除了span和pre for now

JSFiddle

<强> CSS

body
{
    margin:0%;
    width:100%;
}
table
{
    width:100%;
    overflow:auto;
    table-layout:fixed;
    margin:0;
    padding:2px;    
}

.middle {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 1250px;
}

<强> HTML

    <div class="middle">
            <table border=1>
                <tbody>
                    <tr>
                        <td valign="top">
                            <span id="pktDetails">
                                <li class="main1" onclick="pktclick(this)" state="0">Frame 169: 759 bytes on wire (6072 bits), 759 bytes captured (6072 bits)</li>
                                <ul class="a" style="display:none">
                                    <li class="leaf">Encapsulation type: Ethernet (1)</li>
                                    <li class="leaf">Arrival Time: Oct 11, 2011 06:51:36.170112000 CDT</li>
                                    <li class="leaf">Epoch Time: 1318333896.170112000 seconds</li>
                                    <li class="leaf">Frame Number: 169</li>
                                    <li class="leaf">Frame Length: 759 bytes (6072 bits)</li>
                                    <li class="leaf">Capture Length: 759 bytes (6072 bits)</li>
                                </ul>
                                <li class="main1" onclick="pktclick(this)" state="0">Ethernet II, Src: be:08:f1:2f:fa:d4 (be:08:f1:2f:fa:d4), Dst: Cisco-Li_cb:9e:93 (98:fc:11:cb:9e:93)</li>
                                <ul class="a" style="display:none">
                                    <li class="leaf">Destination: Cisco-Li_cb:9e:93 (98:fc:11:cb:9e:93)</li>
                                    <li class="leaf">Source: be:08:f1:2f:fa:d4 (be:08:f1:2f:fa:d4)</li>
                                    <li class="leaf">Type: IP (0x0800)</li>
                                </ul>
                                <li class="main1" onclick="pktclick(this)" state="0">Internet Protocol Version 4, Src: 10.20.0.165 (10.20.0.165), Dst: 157.55.15.126 (157.55.15.126)</li>
                                <ul class="a" style="display:none">
                                    <li class="leaf">Version: 4</li>
                                    <li class="leaf">Header length: 20 bytes</li>
                                    <li class="leaf">Differentiated Services Field: 0x00 (DSCP 0x00: Default; ECN: 0x00: Not-ECT (Not ECN-Capable Transport))</li>
                                    <li class="leaf">Total Length: 745</li>
                                    <li class="leaf">Identification: 0x172b (5931)</li>
                                    <li class="leaf">Flags: 0x02 (Don't Fragment)</li>
                                    <li class="leaf">Fragment offset: 0</li>
                                    <li class="leaf">Time to live: 128</li>
                                    <li class="leaf">Protocol: TCP (6)</li>
                                    <li class="leaf">Header checksum: 0x2976 [validation disabled]</li>
                                    <li class="leaf">Source: 10.20.0.165 (10.20.0.165)</li>
                                    <li class="leaf">Destination: 157.55.15.126 (157.55.15.126)</li>
                                </ul>
                                <li class="main1" onclick="pktclick(this)" state="0">Transmission Control Protocol, Src Port: jetform (1706), Dst Port: http (80), Seq: 1, Ack: 1, Len: 705</li>
                                <ul class="a" style="display:none">
                                    <li class="leaf">Source port: jetform (1706)</li>
                                    <li class="leaf">Destination port: http (80)</li>
                                    <li class="leaf">Sequence number: 1 (relative sequence number)</li>
                                    <li class="leaf">Acknowledgment number: 1 (relative ack number)</li>
                                    <li class="leaf">Header length: 20 bytes</li>
                                    <li class="leaf">Flags: 0x018 (PSH, ACK)</li>
                                    <li class="leaf">Window size value: 65535</li>
                                    <li class="leaf">Checksum: 0xa88a [correct]</li>
                                </ul>
                                <li class="main1" onclick="pktclick(this)" state="1" style="background-image: url(http://localhost/capstar/res/images/node-opened-light.png);">Hypertext Transfer Protocol</li>
                                <ul class="a" style="display: block">
                                    <li class="leaf" style="word-wrap: break-word;">GET /ro.aspx?slv=&amp;tp=http%3A%2F%2Fuk.msn.com%2F%3Focid%3Diefvrt&amp;rid=c5023591b7fc483f960be9e7ef5a80ae&amp;di=179&amp;pi=7441&amp;ps=10225&amp;pn=UK+Homepage&amp;ch=MSFT&amp;evt=impr&amp;obs=msnhp_uk_pv HTTP/1.1\r\n</li>
                                    <li class="leaf">Accept: */*\r\n</li>
                                    <li class="leaf">Referer: http://uk.msn.com/?ocid=iefvrt\r\n</li>
                                    <li class="leaf">Accept-Language: en-gb\r\n</li>
                                    <li class="leaf">Accept-Encoding: gzip, deflate\r\n</li>
                                    <li class="leaf">User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)\r\n</li>
                                    <li class="leaf">Host: ro-exp.uk.msn.com\r\n</li>
                                    <li class="leaf">Connection: Keep-Alive\r\n</li>
                                    <li class="leaf">Cookie: MC1=V=3&amp;GUID=6729f0aec2ee4eac88bda5dfc426e801; expid=id=74b7c0b300c3477d8ffdfb61563c9e4f&amp;bd=2011-10-10T22:05:55.246&amp;v=2; mh=MSFT; CC=IE; Sample=8; MUID=228E3701CDE567001C403586C9E5679A; expac=34II3a39_0803:C|; exprc=id=</li>
                                    <li class="leaf">\r\n</li>
                                </ul>
                            </span>
                        </td>
                        <td valign="top" width="500px">
0080  39 31 62 37 66 63 34 38 33 66 39 36 30 62 65 39   91b7fc483f960be9
0090  65 37 65 66 35 61 38 30 61 65 26 64 69 3d 31 37   e7ef5a80ae&amp;di=17
00a0  39 26 70 69 3d 37 34 34 31 26 70 73 3d 31 30 32   9&amp;pi=7441&amp;ps=102
00b0  32 35 26 70 6e 3d 55 4b 2b 48 6f 6d 65 70 61 67   25&amp;pn=UK+Homepag


                        </td>
                    </tr>
                </tbody>
            </table>
    </div>

答案 1 :(得分:0)

div.middle中的两个第一个元素有一个溢出:auto,如果你只是将溢出设置为初始或不设置溢出,就像在firefox中一样工作。

<body>
   <div class="middle">
      <div   style="overflow: initial;">
      <table style="overflow: initial;">
...

JSFiddle