0

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 class="my-class">
      <td class="my-class"><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.

Carter
  • 3
  • 3
  • 1
    Does this answer your question? [HTML colspan in CSS](https://stackoverflow.com/questions/2403990/html-colspan-in-css) – John Oct 11 '22 at 19:35
  • Close, but that question is talking about non-table elements. I'm trying to understand why the colspan attribute for a td works inline but not in CSS. Thanks, though. – Carter Oct 11 '22 at 19:37
  • I'm pretty sure the `column-span` CSS property is intended for multi column layouts, not for table cells as an alternative to the `colspan` HTML attribute. – agrm Oct 11 '22 at 20:15

3 Answers3

1

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

Serhii Prudkyi
  • 60
  • 6
0

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.

Wai Ha Lee
  • 8,598
  • 83
  • 57
  • 92
Jubal93
  • 1
  • 1
0

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

Asher Moshav
  • 109
  • 5