Question

我需要你的帮助。

如何转换现有的HTML表格，如下所示，并将表格转换为完整的功能div表，同时使用s仅创建表格？

以下是我的HTML代码：

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
#test {
    border: 0;
    width: 100%;
    border-collapse: collapse;
}
#test td {
    border: 1px solid blue;
}
</style>

</head>

<body>
<table id="test">
    <tr>
        <td>row1col1</td>
        <td>row1col2</td>
        <td>row1col3</td>
    </tr>
    <tr>
        <td>row2col1</td>
        <td>row2col2</td>
        <td>row2col3</td>
    </tr>
    <tr>
        <td>row3col1</td>
        <td>row3col2</td>
        <td>row3col3</td>
    </tr>
    <tr>
        <td>row4col1</td>
        <td>row4col2</td>
        <td>row4col3</td>
    </tr>
</table>
</body>

</html>

Answer 1

您可以使用Notepad ++之类的程序并开始替换。

将所有<td>替换为<div>，将</td>替换为</div>

然后，将所有<tr>替换为<div class="tr">，将最终</tr>替换为另一个</div>

完成转换所有表格标签后，您可以设置如下内容：

div {display:table-cell}
div.tr {display:table-row}

~~玩不同的display~~

然后手动删除开始和结束table标记（这很简单）。

最后，您可以设置一些样式，向内部border添加一些padding和div。

您可以获得一些附加信息here

编辑：由于BenM是对的，我更新了anwser因为需要更多信息。

仅将html表转换为一堆div

1 个答案: