Colspan works inline but not in CSS (tables)-CodePudding

Thanks for helping out. I've searched for the answer to this for a while because it seems pretty basic, but can't find anything so I'm posting here.

Why does column-span not seem to work in CSS for table cells? For example, specifying the style inline like this works just fine:

<table>
  <tbody>
    <tr>
      <td colspan="5"><i>Span!</i></td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>

But if I move the colspan to CSS:

.my-class td {
  column-span: all;
}

<table>
  <tbody>
    <tr >
      <td ><i>No span?</i></td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>

Then it does NOT work. Other style attributes (e.g. background color) DO work just fine. But column-span doesn't. What's going on here?

UPDATE: Someone suggested that it's the fact that I was using a number in my CSS (I used "column-span: 5"). But it also doesn't work if I use "all" instead, so I've update the snippet to reflect that.

SOLVED. Thanks for explaining! Didn't realize column-span CSS was not for tables.

CodePudding user response：

The colspan attribute was created to implement the structure. Styles can't change html structure. You cannot use the column-span for table structures.

https://developer.mozilla.org/en-US/docs/Web/CSS/column-span

CodePudding user response：

Check out W3 School's CSS column-span Property description here. Suggests that CSS column span doesn't permit a number in this case. Though I may be misreading it. (First ever post)

CodePudding user response：

column-span does not work for table layouts, only when using columns layout. You should use the colspan attribute.