border-top not working in col

P

Phil

How come the <col> style doesn't render the same in both cases:


<HTML><BODY>
<TABLE style="border: thin solid black">
<COL style="border-bottom:thin solid">
<TBODY>
<TR>
<TD>row 1 col 1 items</TD>
<TD>row 1 col 2 items</TD></TR>
<TR>
<TD>row 2 col 1 items</TD>
<TD>row 2 col 2 items</TD></TR>
<TR>
<TD>row 3 col 1 items</TD>
<TD>row 3 col 2 items</TD></TR>
</TBODY></TABLE></BODY></HTML>



<TABLE style="border-collapse:collapse;border: thin solid black">
<TBODY>
<TR>
<TD style="border-bottom:thin solid">
row 1 col 1 items</TD>
<TD>row 1 col 2 items</TD></TR>
<TR>
<TD style="border-bottom:thin solid">row 2 col 1 items</TD>
<TD>row 2 col 2 items</TD></TR>
<TR>
<TD style="border-bottom:thin solid">row 3 col 1 items</TD>
<TD>row 3 col 2 items</TD></TR>
</TBODY></TABLE></BODY></HTML>
 
R

richard

How come the <col> style doesn't render the same in both cases:


<HTML><BODY>
<TABLE style="border: thin solid black">
<COL style="border-bottom:thin solid">
<TBODY>
<TR>
<TD>row 1 col 1 items</TD>
<TD>row 1 col 2 items</TD></TR>
<TR>
<TD>row 2 col 1 items</TD>
<TD>row 2 col 2 items</TD></TR>
<TR>
<TD>row 3 col 1 items</TD>
<TD>row 3 col 2 items</TD></TR>
</TBODY></TABLE></BODY></HTML>



<TABLE style="border-collapse:collapse;border: thin solid black">
<TBODY>
<TR>
<TD style="border-bottom:thin solid">
row 1 col 1 items</TD>
<TD>row 1 col 2 items</TD></TR>
<TR>
<TD style="border-bottom:thin solid">row 2 col 1 items</TD>
<TD>row 2 col 2 items</TD></TR>
<TR>
<TD style="border-bottom:thin solid">row 3 col 1 items</TD>
<TD>row 3 col 2 items</TD></TR>
</TBODY></TABLE></BODY></HTML>
Click to expand...


probably because no color was given to it.

In the <table> tag, the border refers only to the outside perimiter,
not the border of each cell.
 
B

Bergamot

Phil said:
How come the <col> style doesn't render

<COL style="border-bottom:thin solid">
Click to expand...

Only certain properties can be styled on the col element. Border is not
one of them.
 
J

Jukka K. Korpela

Phil said:
How come the <col> style doesn't render the same in both cases:
Click to expand...

URL? Browser? You don't even reveal whether your snippet is used in Quirks
mode or "Standards" mode.

And what do expect to happen when you set a border on an element that
denotes a column? In any case, _I_ wouldn't expect much, since columns are
really strangers in CSS-land.
 
P

Phil

Thanks, I could only suspect so because I didn't see in the docs that it
wasn't applicable.

I just figured the col attributes would be applied to all TD elements in
the column.
 
B

Bergamot

Phil said:
I just figured the col attributes would be applied to all TD elements in
the column.
Click to expand...

For inheritance like that to happen, td would have to be a child of col.
It's not - it's a child of tr. Besides, border is not an inherited property.
 
G

GTalbot

How come the <col> style doesn't render the same in both cases:

<HTML><BODY>
<TABLE style="border: thin solid black">
<COL style="border-bottom:thin solid">
(...)


<TABLE style="border-collapse:collapse;border: thin solid black">
<TBODY>
<TR>
Click to expand...

Please post an URL, not code.

"The various border properties apply to columns only if 'border-
collapse' is set to 'collapse' on the table element."
http://www.w3.org/TR/CSS21/tables.html#columns

Regards, Gérard
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How to wrap <td> content . 16
Sort by number of characters 1
Javascript DOM 1
Filter table rows based on multiple checkboxes value 2
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Nested Loop Insert Page Break 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1

Members online

Total: 26 (members: 2, guests: 24)
Robots: 235

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,024
Latest member
ARDU_PROgrammER

Latest Threads

Top