javascript - CSS 中的表格尺寸在 HTML 中不起作用

Question

我无法按预期以表格格式获取数据。

myList = '[{"date":"2020-04-05 18:26:01", "symptom":{"chest_pain":{"type":"Mild"},"cough":{"frequency":"5 to 15 times an hour","type":"With Flum"}}},{"date":"2020-04-06 14:57:11", "symptom":{"fever":{"temperature":"98"},"digestion_problem":"Yes"}},{"date":"2020-04-13 04:04:25", "symptom":{"cough":{"frequency":"Less than 5 times an hour","type":"Dry"},"breathing":{"severity":"6"}}}]';

function buildHtmlTable(selector) {
    var columns = addAllColumnHeaders(myList, selector);

    for (var i = 0; i < myList.length; i++) {
        var row$ = $('<tr/>');
        for (var colIndex = 0; colIndex < columns.length; colIndex++) {

            var cellValue = getCellValue(myList[i], columns[colIndex]);
            if (cellValue == null)
                cellValue = "";
            row$.append($('<td/>').html(cellValue));
        }
        $(selector).append(row$);


    }
    $('th').each(function() {
        var text = $(this).text();
        $(this).text(text.replace(/symptom/g, "")); 
        text = $(this).text();
        $(this).text(text.replace(/-/g, " ")); 
        text = $(this).text();
        $(this).text(text.replace(/_/g, " ")); 
        text = $(this).text();
        $(this).text(capitalizeFirstLetter(text)); 
    });
}

function capitalizeFirstLetter(str) {
    return str.replace(/\w\S*/g, function(txt){
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
  }

  console.log(capitalizeFirstLetter('foo')); // Foo


function addAllColumnHeaders(myList, selector) {
    var columnSet = [];
    var headerTr$ = $('<tr/>');

    for (var i = 0; i < myList.length; i++) {
        var rowHash = myList[i];

        recursiveHeaderCheck(rowHash, selector, "", columnSet, headerTr$);
    }
    $(selector).prepend("<thead>");
    $(selector).append(headerTr$);
    $(selector).append("</thead>");

    return columnSet;
}

#symptom_table{
  width: 85vw !important;
  height: 50vh !important;
}

#excelDataTable  {
  width: 85vw !important;
  height: 50vh !important; 
} 

<div id="symptom_table"> 
     <table class="fl-table" id="excelDataTable" border="none"> </table>
  </div>

我正在尝试以 HTML 形式显示从数据库中获取的表格。

但是，当我加载页面并检查时，我看不到该表格。 我发现我的尺寸不匹配。数据表也包含数据。

不确定我缺少什么

编辑1: 将 - 更改为 _ 后，.到 #，wh 到 vh。 症状表 excel数据表

编辑2: 我可以在控制台中看到来自 js 的数据:

Answer 1

您的 CSS 与表的 ID 不匹配:.symptom-table 类不适用于 ID 为 symptom_table 的 div(注意 -) > 和 _)。 我认为您需要将 .symptom-table 选择器更改为 #symptom_table，即通过 ID 和正确的拼写来选择表。

此外，将单位从 wh 修复为 vh