面试之写代码: 你能够将一段没有样式的 html，以最简单的方式使之 responsive 么？

[metrue]

前段时间去室友去面知名互联网公司的前端，给了一段类似新闻的没有样式的html的，让他现场实现移动端自适应，可以使用搜索引擎。挺有难度对我这个前端渣来说。

<div class="content_main left"><!-- adArea --><span>
</span><span>
</span><!-- adArea end--><span>
</span><span>
</span><span>
</span><!--NewsContent--><span>
</span><!--enpproperty <date>2015-04-17 22:33:48.0</date><author>周欣</author><title>中武终极格斗世界职业搏击联盟赛即将来袭</title><keyword>巴特尔,泰国,拳王,搏击,散打</keyword><subtitle></subtitle><introtitle></introtitle><siteid>1</siteid><nodeid>58196</nodeid><nodename>体育滚动</nodename><nodesearchname>null</nodesearchname>/enpproperty--><!--enpcontent--><span>
</span><div class="content" id="text_content"><span>
</span><table border="0" cellpadding="0" cellspacing="0" width="655">
<tbody><tr>
<td align="center"></td></tr>
<tr>
<td background="http://images.china.cn/images1/ch/07news/b_13.gif" height="1"></td>
</tr>
<tr>
<td align="center">发布时间： 2015-04-17 22:09:25&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;作者： 周欣&nbsp;&nbsp;|&nbsp;&nbsp;</td>
</tr>
<tr>
<td align="left">
<p>　　新华网北京４月１７日体育专电（记者周欣）中武终极格斗·ＣＫＦ世界职业搏击联盟赛将于１８日晚在北京国家奥林匹克中心体育馆打响，中国散打冠军白近斌、巴特尔、青格勒等人将与比利时、泰国等外国拳王进行比拼。</p>
<p>　　中国选手派出了全运会冠军巴特尔、世界杯散打冠军白近斌、ＣＫＦ冠军青格勒、ＵＦＣ战将王安莹、省运会冠军孙欣欣、全国冠军满建刚、中国ＭＭＡ第一人张铁泉大弟子贺楠楠。外国拳王包括俄罗斯世界散打冠军穆斯里穆、比利时魔王马特瓦，泰国泰拳王>
阿密，ＵＦＣ名将威廉、泰国第一美女泰拳王、ＷＭＣ金腰带拥有者娜牡丹。</p>
<p>　　在对阵表上，白近斌的对手阿尔卡·马特瓦是荷兰目前一线的三栖战士，绰号“斯巴达人”，在没有升级前参加过７０公斤级的“荣耀”之战，在荷兰除了自由搏击和泰拳外，他还打ＭＭＡ规则的赛事，实力一流绝对不容小觑。白近斌在进入职业赛场后，战绩３战２
负，对他来说，刚进入职业赛场还需要积累自由搏击技术和比赛经验。</p>
<p>　　巴特尔的对手是泰国ＷＭＣ金腰带拳王阿密。巴特尔于今年３月１５日在广州击败了泰国名将潇杀狂，阿密也曾经战胜过潇杀狂。所以巴特尔和阿密的对抗更令人期待。</p>
<p>　　青格勒将与俄罗斯拳王穆斯里穆过招，贺楠楠将和美国选手较量。</p>
<p>　　本次赛事由中国武术协会主办，隆基搏击俱乐部、中武搏击俱乐部承办，赛事出品方为今日乾通(北京)投资有限公司和美国纽约财富公司。</p>
</td>
</tr>
</tbody></table><span>
</span></div><span>

其实我也不知道面试官想听什么答案，拿出来只是让大家可以头脑风暴一下，想看看有没有让大家眼前一亮的方案。

[oott123]

我居然看到了 table …

[qsun]

据说 table 的 responsive style 是世界级难题

[banri]

http://codepen.io/anon/pen/QwPVNW?editors=110

转载，来源不明
就在收藏夹里翻到了……

[banri]

http://banri.me/demo/tabledemo.html

我蛋疼的去试了下…
那啥……题目有问题啊，缺个 /div 标签 多个 span 标签。

主要是不知道你要啥效果 反正随便先试试……媒体查询那边其实不应该是655px

Windows下滚动条一般是18px，所以655+20左右的值是比较好的

[gongpeione]

@banri 不愧是豆狸触！

[metrue]

@banri

我贴出来主要是想听听大家是什么思路。有demo看看就更好了，你的实现我觉得挺好的。

[liyer]

<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#text_content table{
width:98%;
max-width:655px;
}
</style>

这样？

[banri]

@metrue 嘿嘿

思路的话我感觉自己还是有问题。。。
版式方面还是设计师来想会好很多，排版方面其实就是用什么max-width、百分比、以及双栏、三栏自适应之类的吧，如果有菜单还可以考虑配合JS进行切换、隐藏、fixed定位等

[banri]

@gongpeione 树大触 么么哒

[kokdemo]

能不能用js重写一下dom啊……

[66beta]

给一个chrome，不需要搜索引擎了

[richardevs]

@banri 正想發給你看居然就看到了豆腐菊苣！

[jarlyyn]

只要用了mediaquery就是responsive了吧？
效果好不好怎么样的效果是另一回事了……

[FrankFang128]

table,img{width: 100%}
嗯，差不多完成了。

[metrue]

@kokdemo

其实我也想过直接用 JS 重新dom，但是没有想好怎么通用的实现。也就说怎么针对任何的html输入都能work。

[metrue]

@liyer

这是常规的可用的方案，其实我也不知道面试官想听什么答案。

[metrue]

@FrankFang128

好简洁，而且效果可用。

[notcome]

表格的 responsive 其实不是一个通用的问题，而是具体到表格本身。比如首列是否显示？要不要把横着的表格转成竖的？如果比较目的不强，是不是可以一页只显示一列，类似那种首屏照片轮播？