Hi,
I want to be able to simplify the display of a table grid. Rather than having to define classes for the outer table border and the inner grid lines, there has got to be a way to have CSS control the table display when:
<table border=1>
If I set the <table> element's CSS border attribute to border:1px solid black, then ALL tables have external borders. So that isn't the answer. Then, when <table border=1 class=tableGrid>, the ugly and default ridge borders still display.
Somebody's figured this out -- Please enlighten me! My project has some very complex tables, and having to edit each td for class attributes would be a time hog...
Thanks
My sample class:
.tablegrid { border-top:1px solid black;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black; }if this will only be on one table, use an id, such as <table id="tableGrid"> then in the css do #tableGrid{border:1px solid black;}<div class="yadda">
<table class="target"><tr><td>
<table class="target-inner"><tr><td></td></tr></table>
</td></tr></table>
</div>
table.target {border: 1px red solid;}
or
.target {border: 1px red solid;}
table.target-inner {border: 1px blue solid;}
or
target-inner {border: 1px blue solid;}
Depends on whatever else you have specified . Sometimes u have to be more specific, sometimes u can be less specific.Hi - I tried both suggestions, but they didn't quite work. If you look at the gridlines on this forum's UI, that's pretty much what I want to accomplish. The table grids are query based, and are nested within a TD. Depending on the query results, there could be dozens of rows with these nested tables.
If you look at the code for the forum page, they are defining the classes on each TD -- I want to find a way to do this at the TABLE level, only. Also, notice how the forum's black bottom-borders is doubled between each post, resulting in a 2px border. That's another thing I want to avoid.
Basically, I want a display like this:
+-------------+--------------+-----------+
+-------------+--------------+-----------+
+-------------+--------------+-----------+
In other words, when you set a table border to 1, you get the beveled ridge borders around every cell automatically. That's exactly what I need. I just want to override those beveled edges with a solid black line.Does
td {
border-bottom: 1px solid #000;
}
help you at all? Just use one border on the bottom of all the cells? you cac make up the missing borders on the table element.
There is actually another more complex way actually intended for tables which I'll have to look up if you want it.OK <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/tables.html#borders">http://www.w3.org/TR/CSS2/tables.html#borders</a><!-- m --> is the official way.<table class="target">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
table.target {
border-top: 1px black solid;
border-right: 1px black solid;
}
table.target td {
border-left: 1px black solid;
border-bottom: 1px black solid;
}Thanks, TimeBandit! That last post did the job.
I want to be able to simplify the display of a table grid. Rather than having to define classes for the outer table border and the inner grid lines, there has got to be a way to have CSS control the table display when:
<table border=1>
If I set the <table> element's CSS border attribute to border:1px solid black, then ALL tables have external borders. So that isn't the answer. Then, when <table border=1 class=tableGrid>, the ugly and default ridge borders still display.
Somebody's figured this out -- Please enlighten me! My project has some very complex tables, and having to edit each td for class attributes would be a time hog...
Thanks
My sample class:
.tablegrid { border-top:1px solid black;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black; }if this will only be on one table, use an id, such as <table id="tableGrid"> then in the css do #tableGrid{border:1px solid black;}<div class="yadda">
<table class="target"><tr><td>
<table class="target-inner"><tr><td></td></tr></table>
</td></tr></table>
</div>
table.target {border: 1px red solid;}
or
.target {border: 1px red solid;}
table.target-inner {border: 1px blue solid;}
or
target-inner {border: 1px blue solid;}
Depends on whatever else you have specified . Sometimes u have to be more specific, sometimes u can be less specific.Hi - I tried both suggestions, but they didn't quite work. If you look at the gridlines on this forum's UI, that's pretty much what I want to accomplish. The table grids are query based, and are nested within a TD. Depending on the query results, there could be dozens of rows with these nested tables.
If you look at the code for the forum page, they are defining the classes on each TD -- I want to find a way to do this at the TABLE level, only. Also, notice how the forum's black bottom-borders is doubled between each post, resulting in a 2px border. That's another thing I want to avoid.
Basically, I want a display like this:
+-------------+--------------+-----------+
+-------------+--------------+-----------+
+-------------+--------------+-----------+
In other words, when you set a table border to 1, you get the beveled ridge borders around every cell automatically. That's exactly what I need. I just want to override those beveled edges with a solid black line.Does
td {
border-bottom: 1px solid #000;
}
help you at all? Just use one border on the bottom of all the cells? you cac make up the missing borders on the table element.
There is actually another more complex way actually intended for tables which I'll have to look up if you want it.OK <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/tables.html#borders">http://www.w3.org/TR/CSS2/tables.html#borders</a><!-- m --> is the official way.<table class="target">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
table.target {
border-top: 1px black solid;
border-right: 1px black solid;
}
table.target td {
border-left: 1px black solid;
border-bottom: 1px black solid;
}Thanks, TimeBandit! That last post did the job.