Question

我收到了一个巨大的聊天记录文件，并希望将其转换为更好看的可打印文件。目前它只是一个html表。以下是一个示例：http://jsfiddle.net/sXCNC/

html table

最后应该是这样的：http://i.imgur.com/RrFwikZ.png

任何想法如何自动完成？

Answer 1

无需更改HTML，您可以使用CSS执行此操作：

table, tbody, tr, td {display:block; border:0;}

tr.me {
    width:60%;
    background-color: #22A1CE;
    margin:0 0 .5em auto; padding:.5em;
}

tr.other{
    width:70%;
    background-color: #7F007F;
    margin:0 auto .5em 0;
}

thead, td:nth-child(1), td:nth-child(2), td:nth-child(6),
td:nth-child(7), td:nth-child(8) {
    display:none;
}

td:nth-child(3) {
    float:right; font-size:.8em;
}

td:nth-child(4) {
    font-size:.8em;
}

最终以this result结束。

Answer 2

你不应该使用表格。将每条消息放在一个div中，根据消息的发送者，应用一个类，它会在其上放置一些CSS规则，如下所示：

.me {
 float: left;
 background: red:
}

.contact {
 float: right:
 background: green;
}

转换html表日志文件

2 个答案: