Вставка стилей в HTML-таблицу

Я храню старую HTML-разметку в моей базе данных, отслеживаю изменения, а затем пытаюсь отрисовать diff, используя Differ и :html вариант формата.

Следующий код успешно сгенерирован:

<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>, но происходит то же самое.

Есть ли способ стилизовать таблицу, используя элементы, которые я пытаюсь сделать, или мне придется пройтись по дому и применить стили к каждому подходящему? <td> используя JavaScript? Я не могу заменить таблицы в начале, потому что я не контролирую источник.

Источник

2 ответа

Спасибо 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

Это может быть реорганизовано, но это решает проблему. В идеале я мог бы изменить :html опция форматирования в геме Differ, чтобы он вставлял теги в первый вложенный элемент, если сам этот элемент не изменился. Я не уверен, почему это не функциональность по умолчанию, но это выходит за рамки моих возможностей.

Источник

Почему бы не добавить таблицу стилей 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

Источник
Другие вопросы по тегам