Question

我做了一张包含信息的表。但是，没有任何样式，这些列就彼此紧挨着放置，这使得很难看到哪些值属于哪个列。因此，我想使用css制作边框和列之间的一些空间。但是我将整个表格放在我的角度组件中，在html中没有一行代码，因此我什么也没有，我可以添加一个属性，而我可以依次在css文件中调用该属性。如何在表中添加属性或标记，以便可以在其上使用CSS？

function tabulate(data, columns) {
      var table = d3.select('body').append('table')
      var thead = table.append('thead');
      var tbody = table.append('tbody');
      //append the header row
      thead.append('tr')
        .selectAll('th')
        .data(columns).enter()
        .append('th')
        .text(function (column) {
          return column;
        });
      //create a row for each object in the data
      var rows = tbody.selectAll('tr')
        .data(data)
        .enter()
        .append('tr');
      //create a cell in each row for each column
      var cells = rows.selectAll('td')
        .data(function (row) {
          return columns.map(function (column) {
            return {column: column, value: row[column]};
          });
        })
        .enter()
        .append('td')
        .text(function (d) {
          return d.value;
        });
      return table;
    }

这就是现在发生的情况，没有CSS https://imgur.com/a/SJaG3VO 该基因的名称为CD19，但是正如您所看到的，数字19只是粘贴到了其余部分，这很混乱。

Answer 1

为了分隔各列并使每一列在更分离的意义上更加可见，您需要添加更多的CSS。在这里举个例子

https://jsfiddle.net/6rLe1juw/

table {
  width: 100%;
  background-color: red;
}

更新

使用您的stackblitz示例：您正在做的是将表添加到DOM主体中，而不是组件的内容中。这就是CSS无法正常工作的原因。 Angular仅将组件的css应用于组件内部的元素。您可以将上面的代码添加到文件src/styles.css中。然后它将起作用。但是，css应用于应用程序的根目录。另外，我建议使用例如Material tables

这是一个分叉的示例：https://stackblitz.com/edit/angular-pqchzp-wr8fco?file=src/styles.css

向表添加属性，以便可以在其上使用CSS

1 个答案: