Forum Moderators: not2easy
Here is the relevant snippet I'm having the problem with:
<table cellpadding="0" cellspacing="0" class="tab">
<tr>
<th colspan="3" class="thead"><h1>Header</h1></th>
</tr>
...
Here is what I have in place of it:
<div class="tab">
<div class="row">
<div class="thead">
<h1>Header</h1>
</div>
</div>
...
And here is my CSS:
.tab {
display: table;
table-layout: auto;
verticle-align: top;
border: 1px ridge gray;
width: 100%;
height: 100%;
}
.row {
display: table-row;
}
.thead {
display: table-cell;
border: 1px dashed gray;
height: 50px;
background: yellow;
color: #000062;
}
...
The problem is that I have three table-cells in the next row, directly following this one with the header, and the header is not spanning all the cells; it is only as wide as the first cell in the next row.
Setting a width: 100%; rule in the thead class works, but it in turn causes the first cell of the next row to be 100% also -- in effect squishing the other two cells to thr far right.
W3C says of the automatic layout algo:
Note. In this algorithm, rows (and row groups) and columns (and column groups) both constrain and are constrained by the dimensions of the cells they contain. Tables [w3.org]
So the only thing I could think of was to use three tables (one for header, one for content, one for footer)...
.htab {
display: table;
table-layout: auto;
verticle-align: top;
border-top: 1px ridge gray;
border-bottom: none;
border-left: 1px ridge gray;
border-right: 1px ridge gray;
width: 100%;
}
.tab {
display: table;
table-layout: auto;
verticle-align: top;
border: 1px ridge gray;
width: 100%;
height: 83%
}
.ftab {
display: table;
table-layout: auto;
verticle-align: top;
border-top: none;
border-bottom: 1px ridge gray;
border-left: 1px ridge gray;
border-right: 1px ridge gray;
width: 100%;
}
...
But this is obviously not ideal, and seems like a lot of trouble just to get one cell to span a couple of others. Any pointers would be much appreciated. Thanks!
Jordan
Jordan
<no, worry Jordan, I'll move it. -Ted>
[edited by: tedster at 3:45 pm (utc) on Aug. 16, 2003]
Jordan
Cells may span several rows or columns. (Although CSS2 doesn't define how the number of spanned rows or columns is determined...
The long answer is that this is an interesting mental exercise to learn the syntactical issues of CSS. However, as an exercise to learn the semantics and mindset of CSS, I am less enthusiastic. My opinion is that it practically flies in the face of all CSS philosophy. It is just replacing tables with divs which have properties which exactly replicate the properties of tables, rows and cells...
Given that CSS as a syntax is pretty simple, I'd suggest that any learning exercise should be focused on the semantics and mindset aspects of CSS.
Then again, I could just be missing your point.
Shawn
As it stands with the original tabular layout using markup (which, for pragmatic purposes, works perfectly well--don't get me wrong), there is a very blury line between where the content stops and the styling begins--that is, I'm not sure if the table elements are part of the content, or part of the style. On the assumption that it is the latter case, I'm trying to separate the content from the style using CSS.
Jordan
It is hard to comment without understanding the content, and I apologies if this is steering the thread away from your original question.
The point I was making is that the changes you are making are not really separating the content from the style using CSS. Your html will still contain tags dividing your content into cells contained in rows contained in tables. The only difference is that instead of calling them <table>, <tr>, <th> they are called <div>'s with classes representing each of the equivalent table constructs. If your data naturally fits in that sort of containment relationship (data contained in rows contained in tables) then that is fine, in which case use the html table constructs rather than div's simulating those table constructs, and use css to style those table constructs. If the data does not naturally fit in a table construct, then lay it out the way it naturally fits.
Shawn
No worries about being OT, I'm interested in your thoughts, and I don't really expect too much to come of the thread -- I already (basically) figured out how to do it using multiple tables -- though I am still hoping that one of the CSS pros out there can show me a better way to do it. :)
Let me try to explain my thinking in this little exercise. As I understand things, the traditional tabular elements (<table>, <th>, <tbody>, <tr>, <td>, &c.), are all internally styled to look as they do. In effect, I understand them to be shorthand for what I'm trying to do here. But by that internal conglamoration of markup and styling, one loses control over the styling (for the most part) -- or else must (redundantly) apply external styling which will override the internal styling. So what I was trying to do was to make that line between content (markup) and styling plain again, and at the same time elimminate the redundancy, by using generic content w/ no internal styling (divs and spans), and then doing all of the styling externally, using CSS.
Perhaps I am mistaken in my understanding, but that is the reasoning behind the attempt. :)
Jordan
