html-table - スタイルを HTML テーブルに挿入する

Question

データベースに古い html マークアップを保存し、変更を追跡してから、Differと:htmlformat オプションを使用して差分をレンダリングしようとしています。

次のコードが正常に生成されます。

<table>
...
<tr>
  <th style="width:60px; text-align:left;">
    Owner:
  </th>
  <del class="differ">
    <td>
      &nbsp;<span id="someID">Previous Owner Name</span>
    </td>
  </del>
  <ins class="differ">
    <td>
      &nbsp;<span id="someID">Current Owner Name</span>
    </td>
  </ins>
</tr>
...
</table>

<del>および<ins>タグ付きの要素に注意してください。

ソースを表示すると、問題ないように見えます。

しかし、これは明らかにテーブルのレイアウトを乱すため、すべてのブラウザーはこれらの新しい要素をテーブルの前に移動するようです。要素を検査すると、次のようになります。

<del class="differ">   </del>
<ins class="differ">   </ins>
<table>
...
    <tr>
      <th style="width:60px; text-align:left;">
        Owner:
      </th>
        <td>
          &nbsp;<span id="someID">Previous Owner Name</span>
        </td>
        <td>
          &nbsp;<span id="someID">Current Owner Name</span>
        </td>
    </tr>
...
</table>

カスタム Rails ビューヘルパーを作成して、それぞれ<ins>と<del>をに置き換えてみました<span>が、同じことが起こります。

私がやろうとしているような要素を使用してテーブルのスタイルを設定する方法はありますか、それとも dom を歩き回り、<td>javascript を使用して適切なスタイルをそれぞれに適用する必要がありますか? ソースを制御していないため、最初にテーブルを置き換えることはできません。

score 0 · Accepted Answer

問題を確認してくれた David と Steve のおかげで、ビューをレンダリングする前に<ins>と<del>タグをクラスに変換し、Nokogiri を使用してそれらを各子要素に適用することで、この特定のケースを解決することができました。

table_safe次のようにヘルパーを作成しました。

  def table_safe(markup)
    parsed = Nokogiri.parse(markup)
    parsed.css('ins').children().each do |el|
      if el['class']
        el['class'] = el['class'] << ' ins'
      else
        el['class'] = 'ins'
      end
    end
    parsed.css('del').children().each do |el|
      if el['class']
        el['class'] = el['class'] << ' del'
      else
        el['class'] = 'del'
      end
    end
    parsed.to_s
  end

これは明らかにリファクタリングできますが、問題は解決します。理想的には、要素自体が変更されていない場合、最初にネストされた要素の内部にタグを挿入するように、 Differ gem:htmlの書式設定オプションを変更できます。これがデフォルトの機能ではない理由はわかりませんが、私の機能の範囲外です。

score -1 · Accepted Answer

CSS スタイルシートを追加して、スタイルクラスdifferをすべての TD 要素にコピーしてみませんか?

<link rel="stylesheet" type="text/css" href="some.css" />

次に、スタイルシートで次のような定義を行います。

td {
 padding: 15px;
 background-color: gold;
 text: black;
 font-family: Courier, "Courier New", Tahoma, Arial, "Times New Roman";
 border: 1px solid black;
 /* Some other properties here...... */  
}

サンプル HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Anything</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="ja.css" />
 </head>


 <body bgcolor="white" text="black">

<table>
<tr>
 <td>A</td>
 <td>B</td>
</tr>


<tr>
 <td>C</td>
 <td>D</td>
</tr>
</table>

 </body>
</html>

作業例:

http://pastehtml.com/view/ckdf6rxo3.html

たぶん、この W3Schools リンクが役に立つでしょう:

CSS スタイリングテーブル

html-table - スタイルを HTML テーブルに挿入する

2 に答える 2

Related

Reference