CODEWITHSUNDEEP
javascripthtmluser-interfacedomreactjs
Tuomas Toivonen
Tuomas Toivonen

Reputation: 23522

React colspan not working

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.

Upvotes: 62

Views: 70072

Answers (6)

Sk Kaushik
Sk Kaushik

Reputation: 70

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

Upvotes: 0

Yuval Peretz
Yuval Peretz

Reputation: 131

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.

Upvotes: 10

Priyanka Sharma
Priyanka Sharma

Reputation: 197

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".

Upvotes: 6

Rafalfaro
Rafalfaro

Reputation: 231

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.

Upvotes: 0

Nathan Arthur
Nathan Arthur

Reputation: 9106

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

Upvotes: 58

Jonny Buchanan
Jonny Buchanan

Reputation: 62813

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

Upvotes: 50

Related Questions