CSS中的表格尺寸在HTML中不起作用答案

【问题标题】：Table dimensions in CSS not working in HTMLCSS中的表格尺寸在HTML中不起作用
【发布时间】：2020-04-14 01:07:07
【问题描述】：

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

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 的数据：

【问题讨论】：

50vh，不是50wh。
您有一个带有 id 症状表 的表 - 但您在 CSS 中使用了 class 症状表。下划线 vs hive 和 id vs class。
@Azametzin 50vh 已经完成，没有运气。
@Daniel，我改变了 _ 改变了，没有改变我仍然看不到表格
我建议你在 codepen 或 jsfiddle 上准备一个运行版本的代码。更容易理解您的问题

标签： javascript html css html-table

【解决方案1】：

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

另外，将单元从wh 修复为vh

【讨论】：

我把它改成了_，但我还是看不到我的桌子上来了。
从您的屏幕截图中，表格在那里，您只是看不到它，因为它不包含任何数据/行，因此没有什么可以渲染/查看。但这不是由于任何 CSS
当我浏览时，我可以在控制台中看到可用的数据（3 行）。
还有两件事要改变：- 到 _ 和 . 到 # 在你的选择器中
我在我的问题中更改了相同的更新图像，我的#exceldatatable 中是否缺少某些内容？