0

我需要你的帮助。

如何转换现有的 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>
4

1 回答 1

4

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

<td>用<div>和</td>替换所有</div>

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

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

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

display和不同的玩

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

最后你可以设计一点样式，在内部添加一些borderand 。paddingdiv

你可以在这里得到一些额外的信息

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

于 2013-04-11T14:35:18.407 回答