57

Why colspan attribute doesn't have effect in React? I created simple component which renders the following:

<table border="1">
  <tr>
    <th colspan="2">people are...</th>
  </tr>
  <tr>
    <td>monkeys</td>
    <td>donkeys</td>
  </tr>
</table>

and what I get is:

enter image description here

Am I missing something?

Edit: SOLVED

Here is the solution. React expects the attribute name as colSpan, not colspan. Figured this out after wasting ridiculous amount of time to discover this little evil fact.

4
  • There was nothing problem in your code I see. Can you tell more details? Here is the fiddle. You can see that colspan is working well. jsfiddle.net/m2jknr70 Jul 11, 2016 at 8:43
  • Read the edited post. React doesn't like old school html syntax Jul 11, 2016 at 8:44
  • 5
    Please create answer instead of adding it into the question text. It is perfectly legal on SO to answer your own questions.
    – luboskrnac
    Jul 11, 2016 at 8:48
  • Future visitors: Also make sure you've not added a table-irrelevant tag such as <div></div> inside the table structure somewhere. If that's the case and you need it, replace it with a <></> pair.
    – aderchox
    Jan 19, 2022 at 6:24

6 Answers 6

53

In addition to changing the case, I also had to change the value from a string to a number.

Instead of this:

<td colspan='6' />

I had to do this:

<td colSpan={6} />
0
48

From React's DOM Differences documentation:

All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style.

If you check your browser's console, you'll see that React warns you about this:

<meta charset="UTF-8">
<script src="https://npmcdn.com/[email protected]/dist/react.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
<script src="https://npmcdn.com/[email protected]/browser-polyfill.min.js"></script>
<script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
<div id="app"></div>
<script type="text/babel">

var App = React.createClass({
  render() {
    return <table border="1">
      <tbody>
        <tr>
          <th colspan="2">people are...</th>
        </tr>
        <tr>
          <td>monkeys</td>
          <td>donkeys</td>
        </tr>
      </tbody>
    </table>
  }
})

ReactDOM.render(<App who="World"/>, document.querySelector('#app'))

</script>

Warning: Unknown DOM property colspan. Did you mean colSpan?
    in th (created by App)
    in tr (created by App)
    in tbody (created by App)
    in table (created by App)
    in App
8

I had a bit of a different case, but the final solution for me was to actually giving the th/td a display: table-cell; property.

1
  • thanks, this was my problem as well
    – jsaddwater
    Apr 27, 2022 at 14:30
5

colspan property is in camelCase like colSpan. So instead of colspan we need to use colSpan.

In React v16.12 you can still supply the value as either int, like so colSpan={4} or string, like so: colSpan="4".

4
  • It doesn'n really matter - HTML tag names and attribute names are case-insensitive
    – fen1x
    Aug 23, 2017 at 7:43
  • 2
    @fen1x React is a lot stricter than vanilla HTML is. Sep 14, 2017 at 21:55
  • 5
    @fen1x It does matter in react, I have experienced same in my current project. Sep 18, 2017 at 6:15
  • @fen1x It is not HTML actually, it is called JSX which is very similar to HTML.
    – tatoline
    Sep 21, 2021 at 18:37
0

I had to put colSpan at the end before closing the opening tag for some reason it wasn't working in the beginning as the first prop.

0

I tried colSpan with only one td in tr but for me, it didn't work out and if I put another empty td in the same tr it worked. So the code looked like this

<table>

<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>

<tr>
<td colSpan={3}>lorem ipsum</td>
<td></td> <-- Using this empty <td> worked
</tr>

</table>

by using that last empty td it worked for me

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.