Высота строк таблицы работает по-разному в зависимости от того, какой браузер я использую - PullRequest
Новая
       3

Высота строк таблицы работает по-разному в зависимости от того, какой браузер я использую

0 голосов
/ 31 марта 2020

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

Кстати, этот код создает только 3 строки, но позже он сотрет свой исходный контент и создаст 5 строки с различным содержимым (часть стирания и воссоздания здесь не реализована, но выполнена и работает в другом коде). Я застрял с этим вопросом высоты роста ... 

    CreateRow(0);
    CreateRow(1);
    CreateRow(2);
    
    function CreateRow(iRow){
        var Html_Content = document.getElementById("id_MainTable").innerHTML ;
        Html_Content += StandardRow(iRow);
        document.getElementById("id_MainTable").innerHTML = Html_Content;
    }

    function StandardRow(iRow){
        var iColumn, Html_Content = "";
        for (iColumn = 0; iColumn < 10; iColumn++){
            Html_Content += "<td id='Row" + iRow + "Col" + iColumn + "'>-</td>";
        }
        Html_Content += "</row></table>";     
        return Html_Content;
    }  
    html, body{
        height:100%;
        width:100%;
        margin: 0px;
        padding: 0px;
    }
    table{
        height:100%;
        width:100%;
    }  
    table tr{
        height:33%;
    }
    table td{
        width: 10%;
        font-size: 5vmin;
        text-align: center;
        border: solid 1px;
    }
    <table id = "id_MainTable"></table>

Ответы [ 3 ]

0 голосов
/ 31 марта 2020

После того как вы исправили проблему с табличным тегом, указав @ rezKe sh, у вас могут возникнуть проблемы с высотой. У меня в прошлом правильно отформатированный html. Мое решение состояло в том, чтобы назначить браузерам на основе Mozilla их собственные значения атрибутов.

Пример: 

table tr{
  height:33%;
}
@-moz-document url-prefix('') {
  table tr{
    height:30%;
  }
}

Возможно, есть лучшие методы, но это всегда работало для меня. Надеюсь, это было полезно.

0 голосов
/ 31 марта 2020

Более одного выпуска

  • Вы не начинаете свой ряд с <tr>
  • Вы закрываете свой ряд с </row></table> вместо </tr>
  • Chrome попытается "исправить" недействительное HTML. Вам нужно добавить <tbody></tbody>, так как теперь у вас есть несколько вставленных тел с помощью Chrome

CreateRow(0);
CreateRow(1);
CreateRow(2);

function CreateRow(iRow) {
  document.getElementById("id_MainTable").innerHTML += StandardRow(iRow);
}

function StandardRow(iRow) {
  let Html_Content = ["<tr>"]; // I prefer using an array
  for (let iColumn = 0; iColumn < 10; iColumn++) {
    Html_Content.push("<td id='Row" + iRow + "Col" + iColumn + "'>-</td>");
  }
  Html_Content.push("</tr>");
  return Html_Content.join("");
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

table {
  height: 100%;
  width: 100%;
}

table tr {
  height: 33%;
}

table td {
  width: 10%;
  font-size: 5vmin;
  text-align: center;
  border: solid 1px;
}
<table>
  <tbody id="id_MainTable"></tbody>
</table>
0 голосов
/ 31 марта 2020

в этой функции: 

function StandardRow(iRow){
        var iColumn, Html_Content = "";
        for (iColumn = 0; iColumn < 10; iColumn++){
            Html_Content += "<td id='Row" + iRow + "Col" + iColumn + "'>-</td>";
        }
        Html_Content += "</row></table>";     
        return Html_Content;
    }

вы закрываете тег table по ошибке. Ваш результат будет выглядеть так: 

<table id = "id_MainTable">
<td><td></row></table>
<td><td></row></table>
<td><td></row></table>
</table>

Также вы должны начать Html_Content с <tr>

и изменить функцию на: 

function StandardRow(iRow){
        var Html_Content = "<tr>";
        for (var iColumn = 0; iColumn < 10; iColumn++){
            Html_Content += "<td id='Row" + iRow + "Col" + iColumn + "'>-</td>";
        }
        Html_Content += "</tr>";     
        return Html_Content;
    }
...