Creating an old-school looking table with borders with CSS

[notsosmart]

I am trying to leave tables behind completely, as I move to fully responsive designs on my sites.

One thing I can't solve, and this is possibly just a quirk of how I am wired after more than a decade of using the table/tr/td hierarchy for everything, is that I can't seem to be able to create an ACTUAL table with CSS. Not for layout, mind you, but rather a table that presents information like a spreadsheet, with borders around each cell, etc.

Obviously, this is easily doable with tables, but I can't get the CSS DIV syntax right. I just end up with a long list, each time, and it's driving me batty!

(Keep in mind that I am capable of re-writing things like Foundation and Skeleton, so I am not a complete doofus, it's just that there is some sort of cognitive dissonance at play here).

Any suggestions? I am ashamed to even ask, but if I could get the code right, and then style it so it can be responsive, I'll send you all cookies. :-D

[brandozz]

Is the table that you are trying to create to store data? If so, I'd just use a table.

to create what you are describing with css and divs I'd probably do something like this, not perfect but you get the idea:

<style>
.container {
max-width: 1000px;
margin: 0 auto;
padding: 5px;
border: 1px solid black;
overflow: hidden;
}

.row {
width: 100%;
overflow: hidden;
}

.col_1, .col_2, .col_3 {
width: 33%;
float: left;
border: 1px solid red;
text-align: center;
}

.col_2, .col_3 {
border-left: none;
}

</style>

<div class="container">
<div class="row">
<div class="col_1">
<p>column 1 </p>
</div>
<div class="col_2">
<p>column 2</p>
</div>
<div class="col_3">
<p>column 3</p>
</div>
</div>
</div>

[graeme_p]

I would go further than brandozz: it is semantically a table then the right way is to mark it up as a table, and using other tags and CSS to emulate a table is wrong.

It is not tables that are bad: it is the use of table markup for things that are not tables that is bad.

Of course you should style your table with CSS and not by using the various deprecated attributes for controlling table appearance like align and cellpadding.

[notsosmart]

Thank you both for giving support to my instincts...

You are right, if a table makes the most sense, use a table.

And yea, I will style them so they don't look like 1998. :-)

[brandozz]

You may want to consider a framework like bootstrap for your projects. It's a responsive framework with some built in styles specifically for tables.

I use bootstrap for all of my projects.

[notsosmart]

Yea, that's why I'm working with Foundation on most old and new projects... however, for this particular one, I used Skeleton, which is super-clean and has a tiny download "footprint", but it doesn't include anything beyond the responsive grid.

I've tweaked it plenty (doubling the download size in the process, of course), but this is the one thing that (hilariously) I could not wrap my brain around. Anyway, tables it is.