CODEWITHSUNDEEP
htmlcssreactjshtml-table
Nowrie
Nowrie

Reputation: 5

How to add colSpan in ReactJS styled components?

I am making a small web application to display as and HTML table a JSON dataset which has different events. I am using styled-components library to add CSS to my components. The thing is that I am trying to get a table like this one:

How I would like to be

The thing is that what I am obtaining is this table:

Obtained table

The CSS used:

  const TableHeader = styled.th`
    border-color: black;
    border-style:solid;
    border-width:1px;
    font-family:Arial; sans-serif;
    font-size:14px;
    font-weight:normal;
    overflow:hidden;
    padding:10px 5px;
    word-break:normal;
  `;

The ReacJS-HTML used:

<TableHeader>{props.id}</TableHeader>

How can I add to this ReactJS styled-components which is the table header where the ID is displayed to have a colSpan={2}?

Thank you very much.

Upvotes: 0

Views: 2968

Answers (1)

phoenix
phoenix

Reputation: 36

Can you try like this

const TableHeader = styled.th.attrs({
  colSpan: 2
})`
    border-color: black;
    border-style:solid;
    border-width:1px;
    font-family:Arial; sans-serif;
    font-size:14px;
    font-weight:normal;
    overflow:hidden;
    padding:10px 5px;
    word-break:normal;
  `;

Upvotes: 1

Related Questions