Inserting styles into an html table

Question

I am storing old html markup in my database, tracking changes, and then trying to render the diff using Differ and the :html format option.

The following code is successfully generated:

<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>

Notice the <del> and <ins> tagged elements.

If I view the source, it looks fine.

But because apparently this would disrupt the table layout, all browsers seem to move these new elements to before the table. When I inspect the element, I get the following:

<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>

I tried writing a custom Rails view helper to replace each <ins> and <del> with a <span>, but the same thing happens.

Is there a way to style the table using elements like I am trying to do, or am I going to have to walk the dom and apply styles to each appropriate <td> using javascript? I cannot replace the tables in the beginning because I don't control the source.

Could you move ~~and inside of the ? You can only have a or inside of a . Or could you do this: ?~~ — David Brunow, Dec 03 '12 at 01:07
I don't know how to accomplish this. Once the document loads, the markup is already disrupted. So I can't really do it using JavaScript. I tried using `gsub!(' ','')` in the helper, but it never finds the text to replace. This also would only solve the specific issue of `` elements. — Micah Alcorn, Dec 03 '12 at 01:19
That looks like the right direction to pursue though. So your problem is why that text can't be found. — Steve Bennett, Dec 03 '12 at 01:54
It probably doesn't find it because there are newline characters in the HTML (one tag per line, thus a newline) and you aren't including them in your searches. Also, you would need to delete the ending and tags. A good strategy would probably be to first look for the nested elements, style them accordingly on whether they are inside or , and then finally remove all , , and tags that have already been processed. — alt.126, Dec 03 '12 at 02:42

Micah Alcorn · Answer 1 · 2012-12-03T05:56:12.873

Thanks to David & Steve for confirming the issue, I was able to resolve this specific case by translating the <ins> and <del> tags into classes, and applying them to each child element using Nokogiri prior to rendering the view.

I created a table_safe helper as follows:

  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

This can obviously be refactored, but it solves the problem. Ideally I could modify the :html formatting option in the Differ gem so that it inserts the tags inside of the first nested element if that element itself has not changed. I'm not sure why this isn't the default functionality, but it is outside the scope of my capabilities.

score -1 · Answer 2 · answered Dec 03 '12 at 01:30

Why not add a CSS stylesheet to copy the style class differ to all TD elements?

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

And then a definition like this in the stylesheet:

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...... */  
}

And a sample 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>

Working example:

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

Maybe this W3Schools link will be useful:

CSS Styling Tables

What. This doesn't even come close to answering my question. — Micah Alcorn, Dec 03 '12 at 01:42

Inserting styles into an html table

2 Answers2