1

There's a first table row that looks like this:

....

<tr>
   <th colspan="2">Add a category</th>
</tr>

...

It renders correctly. However I want it to be without colspan attribute, but styled in CSS instead. And the reason for that is because there are a lot of similar tables, so it wouldn't require to define the attribute over and over again (just adhering to DRY principle)

I just want it to be as:

<tr>
   <th>Add a category</th>
</tr>

// CSS
table th:first-child {
    /* Pseudo attr */
    colspan : 2px;
}

I've tried playing with float, padding and width with no success. Is there any way to do that in pure CSS?

Yang
  • 8,580
  • 8
  • 33
  • 58
  • Note that the markup in the question is invalid; apparently `tr` with `th` inside was meant. That would be inadequate as per HTML specs, since `th` is a header for cells in the same column or row, not for rows after it; `td` should be used. And `colspan` HTML attribute should be used, because this is about the structure of the table (one cell spans several slots). – Jukka K. Korpela Jun 29 '14 at 10:34

2 Answers2

1

As far as I know, there's no way to do that with pure CSS because colspan is really more layout than style.

According to this, It appears that it was supported on some past browsers, but seems to really be not recommended and unsupported in the present day.

Ruslan
  • 2,691
  • 1
  • 19
  • 29
-2

There are numerous answers to this question: for example you can check the solution described here. It involves the use of column-span css attribute, but as mentioned it won't work on old browsers.

column-span: 4; /* W3C */
-webkit-column-span: 4; /* Safari & Chrome */
-moz-column-span: 4; /* Firefox */
-ms-column-span: 4; /* Internet Explorer */
-o-column-span: 4; /* Opera */

Here you can find a discussion about this point. I agree with the point that a colspan is more structure than appearance and so should stay in HTML, but it is a personal opinion. On the same thread, you can find a solution using divs, if you like.

Community
  • 1
  • 1
Mauro
  • 2,032
  • 3
  • 25
  • 47
  • 2
    What would these be set on in the example case, and how would they solve the problem? – Jukka K. Korpela Jun 29 '14 at 09:04
  • This property is out of the table's scope as it is intended to work with column layouts: https://www.w3schools.com/cssref/css3_pr_column-span.asp – Anton Mitsev Aug 02 '18 at 07:15
  • The end of that "answer" says "However, this will only work in current generation browsers. I would suggest not setting the colspan in CSS, but the choice is yours." – ron_g Oct 07 '21 at 11:16