HTML表格中長字符串實現(xiàn)滾動顯示的實現(xiàn)

作為一個測試工程師嚎花，尤其是做自動化測試的時候鲫咽，結(jié)果展示往往是個重頭戲。如何讓測試case的結(jié)果清晰的展現(xiàn)在大家面前溃斋，而不是一堆log堆在那里界拦，確實是要花時間去考慮的。我這邊目前采用的是HTML中表格的展示方式梗劫，還可以直接在郵件中展示享甸，直觀方便。

在制作HTML表格的初期梳侨，我就是直接用的最簡單的方法蛉威，沒有任何處理，效果如下：

Paste_Image.png

下面是代碼：

<html>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Name</td>
<td>Result</td>
<td>Reason</td>
<td>Comments</td>
</tr>

<tr>
<td>TestCase1</td>
<td>Pass</td>
<td>111</div></td>
<td>This is a comment!</td>
</tr>

<tr>
<td>TestCase2</td>
<td>Fail</td>
<td>java.net.SocketTimeoutException: Read timed out at java.net.SocketInputStream.socketRead0(Native Method) at java.net.SocketInputStream.socketRead(SocketInputStream.java:116) at java.net.SocketInputStream.read(SocketInputStream.java:170) at java.net.SocketInputStream.read(SocketInputStream.java:141) at org.apache.http.impl.io.AbstractSessionInputBuffer.fillBuffer(AbstractSessionInputBuffer.java:166) at org.apache.http.impl.io.SocketInputBuffer.fillBuffer(SocketInputBuffer.java:90) at org.apache.http.impl.io.AbstractSessionInputBuffer.readLine(AbstractSessionInputBuffer.java:281) at org.apache.http.impl.conn.DefaultHttpResponseParser.parseHead(DefaultHttpResponseParser.java:92) at org.apache.http.impl.conn.DefaultHttpResponseParser.parseHead(DefaultHttpResponseParser.java:61) at org.apache.http.impl.io.AbstractMessageParser.parse(AbstractMessageParser.java:254) at org.apache.http.impl.AbstractHttpClientConnection.receiveResponseHeader(AbstractHttpClientConnection.java:289) at org.apache.http.impl.conn.DefaultClientConnection.receiveResponseHeader(DefaultClientConnection.java:252) at org.apache.http.impl.conn.ManagedClientConnectionImpl.receiveResponseHeader(ManagedClientConnectionImpl.java:191) at org.apache.jmeter.protocol.http.sampler.MeasuringConnectionManager$MeasuredConnection.receiveResponseHeader(MeasuringConnectionManager.java:201) at org.apache.http.protocol.HttpRequestExecutor.doReceiveResponse(HttpRequestExecutor.java:300) at org.apache.http.protocol.HttpRequestExecutor.execute(HttpRequestExecutor.java:127) at org.apache.http.impl.client.DefaultRequestDirector.tryExecute(DefaultRequestDirector.java:715) at org.apache.http.impl.client.DefaultRequestDirector.execute(DefaultRequestDirector.java:520) at org.apache.http.impl.client.AbstractHttpClient.execute(AbstractHttpClient.java:906) at org.apache.http.impl.client.AbstractHttpClient.execute(AbstractHttpClient.java:805) at org.apache.jmeter.protocol.http.sampler.HTTPHC4Impl.executeRequest(HTTPHC4Impl.java:517) at org.apache.jmeter.protocol.http.sampler.HTTPHC4Impl.sample(HTTPHC4Impl.java:331) at org.apache.jmeter.protocol.http.sampler.HTTPSamplerProxy.sample(HTTPSamplerProxy.java:74) at org.apache.jmeter.protocol.http.sampler.HTTPSamplerBase.sample(HTTPSamplerBase.java:1146) at org.apache.jmeter.protocol.http.sampler.HTTPSamplerBase.sample(HTTPSamplerBase.java:1135) at org.apache.jmeter.threads.JMeterThread.process_sampler(JMeterThread.java:434) at org.apache.jmeter.threads.JMeterThread.run(JMeterThread.java:261) at java.lang.Thread.run(Thread.java:745)
</td>
<td>This is a comment!</td>
</tr>

<tr>
<td>TestCase3</td>
<td>Pass</td>
<td>222</td>
<td>This is a comment!</td>
</tr>

<tr>
<td>TestCase4</td>
<td>Pass</td>
<td>333</td>
<td>This is a comment!</td>
</tr>

</table>
</body>
</html>

其實單單從展示結(jié)果來說走哺，我們的目的達(dá)到了蚯嫌。但是有一點不完美，就是中間的長字符串把我們的其他列擠壓的不要不要的丙躏，圖變得很丑了择示。怎么優(yōu)化呢？接下來就來看看我是怎么解決這個問題的晒旅。
還是先看效果：

Paste_Image.png

還是很明顯的吧栅盲！中間的長字符串現(xiàn)在變成了可以滾動的形態(tài)，使我們的表格看著舒服多了废恋。話不多說谈秫，看代碼：

<html>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Name</td>
<td>Result</td>
<td>Reason</td>
<td>Comments</td>
</tr>

<tr>
<td>TestCase1</td>
<td>Pass</td>
<td><div class="sidebar-nav" style="overflow:auto;overflow-x:hidden;width:350px;max-height:350px">111</div></td>
<td>This is a comment!</td>
</tr>

<tr>
<td>TestCase2</td>
<td>Fail</td>
<td><div class="sidebar-nav" style="overflow:auto;overflow-x:hidden;width:350px;max-height:350px">java.net.SocketTimeoutException: Read timed out at java.net.SocketInputStream.socketRead0(Native Method) at java.net.SocketInputStream.socketRead(SocketInputStream.java:116) at java.net.SocketInputStream.read(SocketInputStream.java:170) at java.net.SocketInputStream.read(SocketInputStream.java:141) at org.apache.http.impl.io.AbstractSessionInputBuffer.fillBuffer(AbstractSessionInputBuffer.java:166) at org.apache.http.impl.io.SocketInputBuffer.fillBuffer(SocketInputBuffer.java:90) at org.apache.http.impl.io.AbstractSessionInputBuffer.readLine(AbstractSessionInputBuffer.java:281) at org.apache.http.impl.conn.DefaultHttpResponseParser.parseHead(DefaultHttpResponseParser.java:92) at org.apache.http.impl.conn.DefaultHttpResponseParser.parseHead(DefaultHttpResponseParser.java:61) at org.apache.http.impl.io.AbstractMessageParser.parse(AbstractMessageParser.java:254) at org.apache.http.impl.AbstractHttpClientConnection.receiveResponseHeader(AbstractHttpClientConnection.java:289) at org.apache.http.impl.conn.DefaultClientConnection.receiveResponseHeader(DefaultClientConnection.java:252) at org.apache.http.impl.conn.ManagedClientConnectionImpl.receiveResponseHeader(ManagedClientConnectionImpl.java:191) at org.apache.jmeter.protocol.http.sampler.MeasuringConnectionManager$MeasuredConnection.receiveResponseHeader(MeasuringConnectionManager.java:201) at org.apache.http.protocol.HttpRequestExecutor.doReceiveResponse(HttpRequestExecutor.java:300) at org.apache.http.protocol.HttpRequestExecutor.execute(HttpRequestExecutor.java:127) at org.apache.http.impl.client.DefaultRequestDirector.tryExecute(DefaultRequestDirector.java:715) at org.apache.http.impl.client.DefaultRequestDirector.execute(DefaultRequestDirector.java:520) at org.apache.http.impl.client.AbstractHttpClient.execute(AbstractHttpClient.java:906) at org.apache.http.impl.client.AbstractHttpClient.execute(AbstractHttpClient.java:805) at org.apache.jmeter.protocol.http.sampler.HTTPHC4Impl.executeRequest(HTTPHC4Impl.java:517) at org.apache.jmeter.protocol.http.sampler.HTTPHC4Impl.sample(HTTPHC4Impl.java:331) at org.apache.jmeter.protocol.http.sampler.HTTPSamplerProxy.sample(HTTPSamplerProxy.java:74) at org.apache.jmeter.protocol.http.sampler.HTTPSamplerBase.sample(HTTPSamplerBase.java:1146) at org.apache.jmeter.protocol.http.sampler.HTTPSamplerBase.sample(HTTPSamplerBase.java:1135) at org.apache.jmeter.threads.JMeterThread.process_sampler(JMeterThread.java:434) at org.apache.jmeter.threads.JMeterThread.run(JMeterThread.java:261) at java.lang.Thread.run(Thread.java:745)
</div></td>
<td>This is a comment!</td>
</tr>

<tr>
<td>TestCase3</td>
<td>Pass</td>
<td><div class="sidebar-nav" style="overflow:auto;overflow-x:hidden;width:350px;max-height:350px">222</div></td>
<td>This is a comment!</td>
</tr>

<tr>
<td>TestCase4</td>
<td>Pass</td>
<td><div class="sidebar-nav" style="overflow:auto;overflow-x:hidden;width:350px;max-height:350px">333</div></td>
<td>This is a comment!</td>
</tr>

</table>
</body>
</html>

Friendly Support :)
http://www.w3school.com.cn/cssref/pr_pos_overflow.asp

最后編輯于：2017.12.06 08:44:31

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市鱼鼓，隨后出現(xiàn)的幾起案子拟烫，更是在濱河造成了極大的恐慌，老刑警劉巖迄本，帶你破解...
沈念sama閱讀 222,627評論 6贊 517
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件硕淑，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機喜颁，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,180評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門稠氮，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人半开，你說我怎么就攤上這事隔披。” “怎么了寂拆？”我有些...
開封第一講書人閱讀 169,346評論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵奢米，是天一觀的道長。經(jīng)常有香客問我纠永，道長鬓长，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 60,097評論 1贊 300
?港島之戀（遺憾婚禮）
正文為了忘掉前任尝江，我火速辦了婚禮涉波，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘炭序。我一直安慰自己啤覆，他們只是感情好，可當(dāng)我...
茶點故事閱讀 69,100評論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布惭聂。她就那樣靜靜地躺著窗声，像睡著了一般。火紅的嫁衣襯著肌膚如雪辜纲。梳的紋絲不亂的頭發(fā)上笨觅，一...
開封第一講書人閱讀 52,696評論 1贊 312
城市分裂傳說
那天，我揣著相機與錄音耕腾，去河邊找鬼见剩。笑死，一個胖子當(dāng)著我的面吹牛扫俺，可吹牛的內(nèi)容都是我干的炮温。我是一名探鬼主播，決...
沈念sama閱讀 41,165評論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼牵舵，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了倦挂？” 一聲冷哼從身側(cè)響起畸颅，我...
開封第一講書人閱讀 40,108評論 0贊 277
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎方援，沒想到半個月后没炒，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 46,646評論 1贊 319
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡犯戏，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,709評論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年送火，在試婚紗的時候發(fā)現(xiàn)自己被綠了拳话。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,861評論 1贊 353
活死人
序言：一個原本活蹦亂跳的男人離奇死亡种吸，死狀恐怖弃衍，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情坚俗，我是刑警寧澤镜盯，帶...
沈念sama閱讀 36,527評論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站猖败，受9級特大地震影響速缆，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜恩闻，卻給世界環(huán)境...
茶點故事閱讀 42,196評論 3贊 336
男人毒藥：我在死后第九天來索命
文/蒙蒙一艺糜、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧幢尚，春花似錦破停、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,698評論 0贊 25
一樁弒父案辱挥，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至边涕，卻和暖如春晤碘，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背功蜓。一陣腳步聲響...
開封第一講書人閱讀 33,804評論 1贊 274
情欲美人皮
我被黑心中介騙來泰國打工园爷，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人式撼。一個月前我還...
沈念sama閱讀 49,287評論 3贊 379
代替公主和親
正文我出身青樓童社，卻偏偏與公主長得像，于是被迫代替她去往敵國和親著隆。傳聞我的和親對象是個殘疾皇子扰楼，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,860評論 2贊 361

HTML表格中長字符串實現(xiàn)滾動顯示的實現(xiàn)

推薦閱讀更多精彩內(nèi)容