table: border around rows only

msc0tt · Oct 14, 2004

My table is many rows, by 2 columns. I want a border around each row. Put another way, I want borders everywhere except between the 2 columns.
My trolling has only found one solution: for each <TD> in col #1, define top, left, and bottom borders. Then for each <TD> in col #2, define top, right, and bottom borders. Sheesh, this is a lot of tagging.
Is there a more elegant/efficient way?

-with thanks
Mike

ToddWW · Oct 14, 2004

Create a table for each column and put a border around the table.

ToddWW

msc0tt · Oct 14, 2004

Just read my own post, and I'm not sure it was totally clear.

[tt]
Borders I have:
+-----+-----+
| A | B |
+-----+-----+
| C | D |
+-----+-----+
| E | F |
+-----+-----+

Borders I want:
+-----------+
| A B |
+-----------+
| C D |
+-----------+
| E F |
+-----------+
[/tt]

Note: for formatting reasons, I can't just go to a single column table.

again, thanks.

msc0tt · Oct 14, 2004

Hi Todd,
If you mean "create a table for each row...", I tried this with negative results. The problem is that I want both columns to align correctly. If each row is a separate table, I would have to force a fixed width on the first column to achieve this. I want this first column to auto-size itself to the width of the largest entity in the column.

ChrisHunt · Oct 14, 2004

Put this in your style sheet:

Code:

table.outlined {
   border-collapse: collapse;
}

table.outlined tr {
   border: 1px solid black;
}

and this in your HTML:

Code:

<table class="outlined">
  <tr>
    <td>A</td><td>B</td>
  </tr>
  <tr>
    <td>C</td><td>D</td>
  </tr>
  <tr>
    <td>E</td><td>F</td>
  </tr>
</table>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

ToddWW · Oct 14, 2004

OK. Try this.

Code:

<head>
<style type="text/css">
.t1 {
    border: solid black 1px;
    border-right: none;
}
.t2 {
    border: solid black 1px;
    border-left: none;
}
</style>
</head>

<body>
<table>
  <tr>
    <td class="t1"></td>
    <td class="t2"></td>
  </tr>
  <tr>
    <td class="t1"></td>
    <td class="t2"></td>
  </tr>
  <!-- etc.. 
       etc.. 
       etc.. -->
</table>
</body>

ToddWW

ToddWW · Oct 14, 2004

Thank Chris. I didn't know you could apply a style to a <tr> tag. That is definitely much cleaner than my option.

ToddWW

msc0tt · Oct 14, 2004

Chris,

Your solution looks very clean. Unfortunately, I still get a border line between my two columns. I've inserted the code in the hopes that I'm making a syntax mistake. Also, I guessed at how to "put this code" in my style sheet.
-thanks
Oh yeah, using IE6.

Code:

<html><head>
<style type="text/css">
 table.outlined { border-collapse: collapse }
 table.outlined tr { border: 1px solid black }
 </style>
</head>

<body>
<table class="outlined">
<tr><td>
 This is the first item<br>
 This is the first item<br>
 This is the first item<br>
 This is the first item
</td><td>
 <img src="">
</td></tr>

<tr><td>
 This is the second item<br>
</td><td>
 <img src="">
</td></tr>

</table>
</body></html>

msc0tt · Oct 14, 2004

I've been messing with this "simple" need, and CSS was just getting more complicated.

I just found a non-CSS solution that works exactly perfect for my need!
<table rules="rows">
That's it!

I'm not sure what the browser support is like, but this is a non-commercial application.

Thanks to all for the support.
Mike

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

table: border around rows only

msc0tt

IS-IT--Management

ToddWW

Programmer

msc0tt

IS-IT--Management

msc0tt

IS-IT--Management

ChrisHunt

Programmer

ToddWW

Programmer

ToddWW

Programmer

msc0tt

IS-IT--Management

msc0tt

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor