Solved

html table cell borders

Posted on 2014-03-05
2
1,070 Views
Last Modified: 2014-03-05
I'm trying to create a table that has no table border, but has just internal cell borders between neighboring cells (if a cell touches the edge of the table, there is nothing displayed).

It should look like a grid with no top, left, right, or bottom border.

I seems easy to do a table with an external border and no internal grid, but I want the opposite.
0
Comment
Question by:ttitus
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 39908084
Try this:
<!DOCTYPE html>
<html>
<head>
<title> EE Q_28381371 </title>
<style type="text/css">
#tbl {
  border: none;
  border-spacing: 0;
}
#tbl tr td {
  padding: 2px 4px 2px 4px;
}
#tbl tr:not(:first-child) td {
  border-top: 1px solid black;
}
#tbl tr td:not(:first-child) {
  border-left: 1px solid black;
}
</style>
</head>
<body>
<table id="tbl">
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>
</body>
</html>

Open in new window

Alternative with double lines/extra spacing:
<style type="text/css">
#tbl {
  border: none;
  border-spacing: 2px;
}
#tbl tr td {
  padding: 2px 4px 2px 4px;
}
#tbl tr:not(:first-child) td {
  border-top: 1px solid black;
}
#tbl tr:not(:last-child) td {
  border-bottom: 1px solid black;
}
#tbl tr td:not(:first-child) {
  border-left: 1px solid black;
}
#tbl tr td:not(:last-child) {
  border-right: 1px solid black;
}
</style>

Open in new window

0
 

Author Closing Comment

by:ttitus
ID: 39908120
Exactly what I was looking for!  Very elegantly done!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question