CSS Tables Colspan

Question

Alright i am trying not to use HTML tables at all possible now a days. But i am using CSS tables but i am wondering if there is an equivalent of colspan in CSS tables.

I have this code

#fleetTable{display: table;width: 360px;margin: 0 auto;margin-top: 20px;font-size:.875em;float:left;}
    .fleetRow{display: table-row;}
    .fleetCell{display: table-cell;}

And this HTML

<div id="fleetTable">
    <div class="fleetRow textright">
        <div class="fleetCell">Headline</div> <!-- I would like this to span both columns below but be centered -->
    </div>
    <div class="fleetRow textright">
        <div class="fleetCel;">Cell1</div>
        <div class="fleetCell">Cell2</div>
    </div>
</div>

What selector would you use here to accomplish this?

Don't go overboard. It's totally OK to use tables to lay out tabular data. If what you have really is a table of data, then for heaven's sake use a table. Don't use tables to do page layout. — Ian McLaird
– Ian McLaird, Commented Sep 13, 2013 at 20:52
Yeah it was duplicate but google didnt give me that result @Quentin but thanks for the link that will work. — Travis
– Travis, Commented Sep 13, 2013 at 20:57
@IanMcLaird it is such a battle of where to use them and where to not. I was taught to use them way back when and then after learning real CSS layouts i have tried to stay away — Travis
– Travis, Commented Sep 13, 2013 at 20:58

Sachin · Accepted Answer · 2013-09-13 20:53:58Z

1

I am making an obvious assumption that your header will be the first cell of the first row and which having the .fleetCell class. So you can select this first element using :first-child pseudo selector like this.

CSS

.fleetCell:first-child{
   text-align:center;
}

JS Fiddle Example

answered Sep 13, 2013 at 20:53

Sachin

41.1k7 gold badges94 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Travis Over a year ago

Interesting way of doing this. Your assumption is correct, this needs support for IE7 and IE8 uggghhhh but thanks for the answer. I really need to use pseudo elements more for things like this.

Collectives™ on Stack Overflow

CSS Tables Colspan

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related