Question

我有一个HTML表，其中使用* ngFor将数据导入其中。表中的某些行有12个数据，所以它有12列，但是有些行只有2个数据，所以只有2列。

我尝试使用空单元格：在CSS中显示，但是由于我要显示的多余单元格没有任何数据，因此它们不会显示。

我也尝试添加额外的空<td>元素，但是因为我正在使用*ngFor，所以它还将空单元格添加到每一行的末尾，因此它们仍然是不均匀的。 / p>

我已经做了一个基本的StackBlitz，以演示该问题。在该示例中，我希望所有单元格都具有灰色背景，即使它们没有数据也是如此。

最好的方法是什么？

Answer 1

您可以使用colspan和rowspan用于列和行：

<table>
    <tr>
        <th colspan="2">65</th>
        <th colspan="2">40</th>
        <th colspan="2">20</th>
    </tr>
    <tr>
        <th>Men</th>
        <th>Women</th>
        <th>Men</th>
        <th>Women</th>
        <th>Men</th>
        <th>Women</th>
    </tr>
</table>

此处有更多详细信息：https://html.com/tables/rowspan-colspan/

您还可以避免使用表格，并使用DIV和网格或Flexbox创建整个布局。

要了解有关CSS网格的更多信息：https://css-tricks.com/snippets/css/complete-guide-grid/

要了解有关CSS Flexbox的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

具有空单元格的示例：https://codepen.io/fabiozanchi/pen/QXrPbV

Answer 2

我认为这可能是您想要做的

<table class="table table-bordered">
<tr>
    <th colspan="2">65</th>
    <th colspan="2">40</th>
    <th colspan="2">20</th>
</tr>
<tr>
    <th>Men</th>
    <th>Women</th>
    <th>Men</th>
    <th>Women</th>
    <th>Men</th>
    <th>Women</th>
</tr>
<tr>
    <th>Men 1</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>Women1</th>
    <th>&nbsp;</th>
    <th>Women2</th>
</tr>
</table>

Answer 3

使用以下代码更改表格。这将完美地工作。

  var autotila = document.getElementById("autolista")
    var nappi = document.getElementById("nappi");

    nappi.addEventListener("click", function() {
      var auto = new XMLHttpRequest();
      auto.open('GET', 'cars.json');
      auto.onload = function() {
        var ourData = JSON.parse(auto.responseText);
        lisaahtml(ourData);
      };
      auto.send();
    });


    function lisaahtml(data) {
      var htmlpatka = "";
      for (i = 0; i < data.lenght; i++) {<<<-----  data.length
        htmlpatka += "<p>" + data[i].manufacturer + "," + data[i].model + "," + data[i].price + "," + data[i].wiki + "</p>";
      }
      autotila.insertAdjacentHTML('beforeend', htmlpatka)
    }

使用此数组添加标题行

<table id="table">
 <tr>
   <td *ngFor = "let col of tableColumns">{{col}}</td>
 </tr>
 <tr *ngFor = "let data of array">
   <td *ngFor = "let col of tableColumns; index as i">{{data.split(',')[i]}}</td>
 </tr>
</table>

如何在HTML表格中添加空白单元格，从而使行与包含数据的行具有相同数量的单元格？

3 个答案: