title: ColSpan does not apply to TDs when using react
body: <p><strong>Working with React and Bootstrap, I have the following code:</strong></p>
  <p>Person class:</p>
  <pre><code>if (this.state.edit == true){
      return(
      &lt;tr&gt;
          &lt;td className=&quot;col-sm-4&quot;&gt;&lt;input type=&quot;text&quot; value={this.state.firstName} onChange={this.handleChangeFirstName} &gt;&lt;/input&gt;&lt;/td&gt;
          &lt;td className=&quot;col-sm-4&quot;&gt;&lt;input type=&quot;text&quot; value={this.state.lastName} onChange={this.handleChangeLastName} &gt;&lt;/input&gt;&lt;/td&gt;
          &lt;td className=&quot;col-sm-4&quot;&gt;
            &lt;button className=&quot;btn btn-info glyphicon glyphicon-remove&quot; onClick={this.handleCancelEdit}&gt;&lt;/button&gt;  { &quot;      &quot; }
            &lt;button className=&quot;btn btn-info glyphicon glyphicon-ok&quot; onClick={this.handleRealEdit}&gt;&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      );
  } else return (
    &lt;tr&gt;
        &lt;td className=&quot;col-sm-4&quot;&gt;{this.state.firstName}&lt;/td&gt;
        &lt;td className=&quot;col-sm-4&quot;&gt;{this.state.lastName}&lt;/td&gt;
        &lt;td className=&quot;col-sm-4&quot;&gt;
          &lt;button className=&quot;btn btn-info glyphicon glyphicon-pencil&quot; onClick={this.handleEdit}&gt;&lt;/button&gt;  { &quot;      &quot; }
          &lt;button className=&quot;btn btn-info glyphicon glyphicon-trash&quot; onClick={this.handleDelete}&gt;&lt;/button&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
  );
  </code></pre>
  <p>The 'upper level' calls this as the following:</p>
  <pre><code>this.props.people.forEach(function(person) {
    rows.push(
      &lt;Person person={person} key={person.id} /&gt;
    );
  });
  
  return (
    &lt;table className=&quot;table table-striped text-center&quot;&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th className=&quot;text-center&quot;&gt;First Name&lt;/th&gt;
                &lt;th className=&quot;text-center&quot;&gt;Last Name&lt;/th&gt;
                &lt;th className=&quot;text-center&quot;&gt;Delete&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;{rows}&lt;/tbody&gt;
    &lt;/table&gt;
  );
  </code></pre>
  <p>For some reason neither <em>className=&quot;col-sm-4&quot;</em> nor <em>colSpan=&quot;4&quot;</em> nor <em>colSpan={4}</em> works, in both cases if the <em>state.edit is true</em>, the first column will be very wide compared to the others.</p>