CODEWITHSUNDEEP
cssreactjs
RamAlx
RamAlx

Reputation: 7334

Table with row scope in html does not work

I want to create a table in react which has some horizontal headers like this: enter image description here

So i'm writing:

<table className="table table-hover">
  <thead>
    <tr>
      <td />
      <th>EUR</th>
      <th>USD</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">AVAILABLE TO TRADE</th>
      <td>€123.154,12</td>
      <td>$3.154,12</td>
      <th scope="row">AVAILABLE TO WITHDRAW (LOCAL)</th>
      <td>€123.154,12</td>
      <td>$3.154,12</td>
    </tr>
  </tbody>
</table>

However, this doesn't seem to work. It gives me something like this: enter image description here

Why is that??

Upvotes: 1

Views: 1191

Answers (1)

Chris
Chris

Reputation: 59511

You want two rows here, but you only have one <tr> defined. This makes everything squeeze into one row which is why it looks the way it does in your example.

Try:

<table className="table table-hover">
  <thead>
    <tr>
      <td />
      <th>EUR</th>
      <th>USD</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">AVAILABLE TO TRADE</th>
      <td>€123.154,12</td>
      <td>$3.154,12</td>
    </tr>
    <tr>
      <th scope="row">AVAILABLE TO WITHDRAW (LOCAL)</th>
      <td>€123.154,12</td>
      <td>$3.154,12</td>
    </tr>
  </tbody>
</table>

Also, note that <td /> cannot self-close in HTML. However, since you are using React it is valid JSX, but it's probably still a bad practice though. Only self-close tags that can self-close in HTML (e.g <br /> or <img />) and for React components.

Upvotes: 2

Related Questions