CODEWITHSUNDEEP
htmlcsshtml-table
Carter
Carter

Reputation: 13

Colspan works inline but not in CSS (tables)

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.

Upvotes: 1

Views: 2216

Answers (3)

Jubal93
Jubal93

Reputation: 11

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.

Upvotes: 1

Serhii Prudkyi
Serhii Prudkyi

Reputation: 70

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

Upvotes: 2

Asher Moshav
Asher Moshav

Reputation: 137

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

Upvotes: 1

Related Questions