试图在div中包含一个表,以使表的宽度不超过包含DIV的宽度。
该表有一行,有两个元素。第二个元素是固定长度,第一个元素应该包装文本,以使总表宽度不超过div的宽度。
以下代码(jsfiddle)不适用于Chrome浏览器(40.0.2214.111(64位)),但它似乎适用于Firefox浏览器(29.0)。知道如何使它适用于两者?谢谢。
<html>
<body>too long, code is in jsfiddle</body>
</html>
答案 0 :(得分:1)
您使用pre标签来维护数据的格式,而不是使用表格(也就是表格内的表格)。
你的问题将通过table-layout:fixed;来解决,但是当你在表中使用pre和div(用span替换它)时,你必须对其进行修改,以使其正常工作。我已经删除了span和pre for now
<强> 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=&tp=http%3A%2F%2Fuk.msn.com%2F%3Focid%3Diefvrt&rid=c5023591b7fc483f960be9e7ef5a80ae&di=179&pi=7441&ps=10225&pn=UK+Homepage&ch=MSFT&evt=impr&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&GUID=6729f0aec2ee4eac88bda5dfc426e801; expid=id=74b7c0b300c3477d8ffdfb61563c9e4f&bd=2011-10-10T22:05:55.246&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&di=17
00a0 39 26 70 69 3d 37 34 34 31 26 70 73 3d 31 30 32 9&pi=7441&ps=102
00b0 32 35 26 70 6e 3d 55 4b 2b 48 6f 6d 65 70 61 67 25&pn=UK+Homepag
</td>
</tr>
</tbody>
</table>
</div>
答案 1 :(得分:0)
<body>
<div class="middle">
<div style="overflow: initial;">
<table style="overflow: initial;">
...