добавить атрибут в таблицу, чтобы я мог использовать CSS на нем

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;
}

UPDATE

Используя ваш пример stackblitz: вы добавляете таблицу в тело DOM вместо содержимого вашего компонента. Вот почему CSS не будет работать. Angular применяет CSS компонента только к элементам внутри компонента. Вы можете добавить приведенный выше код в файл src/styles.css. Тогда это будет работать. Тем не менее, эта CSS применяется в корне приложения .... В качестве альтернативы я бы предложил использовать, например, Таблицы материалов

Вот раздвоенный пример: https://stackblitz.com/edit/angular-pqchzp-wr8fco?file=src/styles.css