CODEWITHSUNDEEP
htmlcsscsv
heroZero
heroZero

Reputation: 173

Insert a dash between columns in a table?

I would like to make a table with three columns, that is taking data from a csv. However, I would like to insert a dash between two columns so instead of

Fruit Animal Colour

Apple Dog yellow

banana Cat blue

it would be

Fruit Animal Colour

Apple - Dog yellow

banana - Cat blue

Any suggestions would be great!

Upvotes: 0

Views: 488

Answers (1)

msassen
msassen

Reputation: 139

You could use the before pseudo-element together with nth-child(2). Check the snippet below for a demo.

table tr td:nth-child(2)::before {
  content: "- ";
}
<table>
  <tr>
    <th>Fruit</th>
    <th>Animal</th>
    <th>Colour</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Dog</td>
    <td>yellow</td>
  </tr>
  <tr>
    <td>banana</td>
    <td>Cat</td>
    <td>blue</td>
  </tr>
</table>

Upvotes: 1

Related Questions