0

あなたの助けが必要です。

s を使用してテーブルのみを作成しながら、既存の HTML テーブルを以下に示すように変換し、テーブルを完全に機能する div テーブルに変換するにはどうすればよいですか?

以下は私の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タグを手動で削除します (これは簡単です)。

最後に、少しスタイルを整えて、インナーにborderとを追加します。paddingdiv

ここで追加情報を入手できます

編集：BenMが正しいので、より多くの情報が必要なため、anwserを更新しました。

于 2013-04-11T14:35:18.407 に答える