Шрифты в таблице портятся после сортировки - PullRequest
Новая
       0

Шрифты в таблице портятся после сортировки

0 голосов
/ 05 июня 2018

У меня есть следующая проблема, я не могу обернуть голову вокруг.

У меня есть отчет об открытых случаях неисправностей, который генерируется автоматически, а затем отправляется в виде HTML-файла людям, которым необходимо это знать.Раньше это была простая таблица без каких-либо стилей, только текст.Это было не очень удобно для пользователя.
Поэтому я добавил стили и свертывание ячеек, если они слишком длинные.Затем я хотел добавить сортировку к нему.Я нашел простой пример в JS от w3schools , который работает.

И вот проблема, когда отчет открыт на мобильном устройстве в Chrome (также на рабочем столе)в режиме реагирования ) и таблица отсортирована, размер шрифта будет испорчен.Это влияет только на некоторые столбцы и разные в зависимости от ширины экрана.

Вот так выглядит перед сортировкой:
before sorting

И это после:
after sorting

Если развернуть ячейку, вы увидите, что только текст, который не был скрыт, испортился:
expanded

Я попытался заключить ячейки в ячейкув дополнительных DIV и SPAN, пробуя различные атрибуты размера шрифта и добавляя ограничения ширины.Пока ничего не получалось.Я не настолько хорошо разбираюсь в HTML / CSS / JS, чтобы, к сожалению, понять, что с ним не так.

Буду очень рад любой помощи.

Вот пример отчета, который вы можете попробовать: 

window.onload = function() {
  c = document.getElementsByClassName('expand');
  for (i = 0; i < c.length; i++) {
    lc = c[i].lastChild;
    lc.style.display = "none";
    lc.previousSibling.style.display = "inline";
  }
  c = document.getElementsByClassName('expand');
  for (i = 0; i < c.length; i++) {
    c[i].addEventListener("click", function(e) {
      if (this.lastChild.style.display == "table") {
        this.lastChild.style.display = "none";
        this.lastChild.previousSibling.style.display = "initial"
      } else {
        this.lastChild.style.display = "table";
        this.lastChild.previousSibling.style.display = "none"
      }
      console.log(this.id, this.lastChild);
    })
  }
  h = document.getElementsByTagName("th");
  for (i = 0; i < h.length; i++) {
    h[i].innerHTML += "<br><span>&or; &and;</span>";
  }
}
sort_direction = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

function sortTable(column_id, direction) {
  // Method from https://www.w3schools.com/howto/howto_js_sort_table.asp
  direction = sort_direction[column_id];
  sort_direction[column_id] = sort_direction[column_id] * -1;
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("mainTable");
  switching = true;
  while (switching) {
    switching = false;
    rows = table.getElementsByTagName("tbody");
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[column_id];
      y = rows[i + 1].getElementsByTagName("td")[column_id];
      if (direction == -1) {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (direction == 1) {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}
body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
}

th,
td,
.e {
  background: #fff;
  margin: 0 auto;
  text-align: center;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /* box-shadow */
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
  word-wrap: break-word;
}

th:hover {
  cursor: pointer;
}

tr {
  line-height: 14px;
}

table {
  border-style: none;
  font-size: 10px;
}

.expand {
  border: 1.5px solid DodgerBlue;
}

.expand:hover {
  background-color: #eee;
  cursor: pointer;
}

.medium_cell {
  max-width: 220px;
}

.small_cell {
  max-width: 75px;
}
<H1>Report</H1>
<h3>Report generated: 2018-06-05 13:10:07</h3>

<table id="mainTable" border="1" bordercolor="#C0C0C0" cellspasing="0" cellpadding="2">
<tbody><tr id="row0" class="class_row">
<th onclick="sortTable(0)">Case ID</th>
<th onclick="sortTable(1)">Status/Title</th>
<th onclick="sortTable(2)">Reported Date</th>
<th onclick="sortTable(3)">Notes</th>
<th onclick="sortTable(4)">Author</th>
<th onclick="sortTable(5)">Assigned Team</th>
<th onclick="sortTable(6)">Assigned Person</th>
<th onclick="sortTable(7)">Severity</th>
<th onclick="sortTable(8)">Priority</th>
<th onclick="sortTable(9)">Flags</th>
<th onclick="sortTable(10)">Information</th>
</tr></tbody>

<tbody><tr id="row3" class="class_row">  <td><a class="small_cell" href="#">ID654321</a></td>
  <td class="medium_cell"><p style="font-weight: bold">Many Many Many Lines Status</p>[TT18][TT00+6*TT18]Title of the reported fault</td>
  <td class="small_cell">23 May 2018</td>
  <td id="row3c1" class="expand medium_cell" style="font-size: 10px;"><div style="font-weight: bold">2018-05-00 00:00:00</div> xxxx xxxxxxxxx xx xxxxBxxx
x4 - xxxxxRxxx, xx. <p style="font-size: 4px;"/><div style="display:none; font-size: 12px;">&#8681; <span style="font-style: oblique; font-size: 10px; font-weight: bold">click to expand</span> &#8681;</div><div style="display: table;"><div style="font-weight: bold">2018-05-00 00:00:00</div> xxxx xxxxRxx xx xxxxxxxxx
. xxxxxxx Rxxxxx xxxxxxxx.<BR><div style="font-weight: bold">2018-05-00 00:00:00</div> xxxx xxxxBxxx xx xxxxRxx
xxxxxx xxxxx xxxx xxxx xxx</div></td>
  <td class="small_cell">Henry</td>
  <td>TEAMBLUE</td>
  <td class="small_cell">Maria</td>
  <td style="background-color:Orange; color:Black;">B<br>Major</td>
  <td style="background-color:Orange; color:Black;">2<br>Critical</td>
  <td></td>
  <td id="row3c2" class="expand"><span style="font-style: oblique">RC: unknown, LE: yyyy-mm-dd</span><div style="font-weight: bold">2018-05-00</div> xxxx (xxxxxx): xxxxxx xxxxxx xxxxx xx xxxxxxx xxxxxxx xx xxxxxxx; xR xxxx <p style="font-size: 4px;"/><div style="display:none; font-size: 12px;">&#8681; <span style="font-style: oblique; font-size: 10px; font-weight: bold">click to expand</span> &#8681;</div><div style="display: table; margin: 0 auto;"><div style="font-weight: bold">2018-05-00</div> xxxx (xxxxxx): xxxxxxxxxxxxx</div></td>
</tr></tbody>


<tbody><tr id="row4" class="class_row">  <td><a class="small_cell" href="#">ID345678</a></td>
  <td class="medium_cell"><p style="font-weight: bold">Even Longer Status</p>[Title_tag][TT00]Title of the reported fault</td>
  <td class="small_cell">24 May 2018</td>
  <td class="medium_cell" id="row4c1" style="font-size: 10px;"><div style="font-weight: bold">2018-05-00 00:00:00</div> xxxx xxxxxxxxx xx xxxxBxxx
x4 - xxxxxRxxx, xx.</td>
  <td class="small_cell">Doug</td>
  <td>TEAMBLUE</td>
  <td class="small_cell">Ross</td>
  <td style="background-color:Orange; color:Black;">B<br>Major</td>
  <td style="background-color:Yellow; color:Black;">3<br>Normal</td>
  <td></td>
  <td id="row4c2" class="expand"><span style="font-style: oblique">RC: unknown, LE: yyyy-mm-dd</span><div style="font-weight: bold">2018-05-00</div> xxxxxx(xxxxxxxx): xxxxxxx xxx xxxxxxxx xxxxxxx xx xxxxxx. <p style="font-size: 4px;"/><div style="display:none; font-size: 12px;">&#8681; <span style="font-style: oblique; font-size: 10px; font-weight: bold">click to expand</span> &#8681;</div><div style="display: table; margin: 0 auto;"><div style="font-weight: bold">2018-05-00</div> xxxx (xxxxxx): xxxxxx xxxxxx xxxxx xx xxxxxxx xxxxxxx xx xxxxxxx; xR xxxx
<div style="font-weight: bold">2018-05-00</div> xxxx (xxxxxx): xxxxx xxxxx xx xx xxxxxxx xx xx xx345234</div></td>
</tr></tbody>
</table>

* редактировать *
Если вы хотите загрузить и попробовать файл самостоятельно, вы можете получить его здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...