Html table middle border

CSS: borders between table columns only

I know this is an old question, but there is a simple, one line solution which works consistently for Chrome, Firefox, etc., as well as IE8 and above (and, for the most part, works on IE7 too — see http://www.quirksmode.org/css/selectors/ for details):

The output is something like this:

What is making this work is that you are defining a border only on table cells which are adjacent to another table cell. In other words, you’re applying the CSS to all cells in a row except the first one.

By applying a left border to the second through the last child, it gives the appearance of the line being «between» the cells.

Erasmus has a better one-liner below

Not without tricky css selectors and extra markup and the like.

Something like this might do (using CSS selectors):

table < border:none; border-collapse: collapse; >table td < border-left: 1px solid #000; border-right: 1px solid #000; >table td:first-child < border-left: none; >table td:last-child

To clarify @jeroen’s comment blow, all you’d really need is:

table < border: none; border-collapse: collapse; >table td < border-left: 1px solid #000; >table td:first-child

Note: IE6-8 does not support :last-child (and spotty on :first-child according to quirksmode.org/css/contents.html

my comment was mainly directed at Scott to counter the problem he brought up; I completely agree with the idea of your answer, you can even get rid of the first line as far as I´m concerned 🙂 +1

Borders on tables are always a bit flaky. One possibility would be to add a border-right declaration to each table cell except for the ones in right-most column. If you’re using any kind of table-spacing this won’t work very well.

Another option would be to use a 1px high background image with the borders inside it, but that’ll only work if you can guarantee the width of each cell at all times.

Another possibility is to experiment with colgroup / col. This had fairly horrible support cross-browser the last time i looked at it but could have improved since then: http://www.webmasterworld.com/forum83/6826.htm

This is rather terrible advice — CSS offers an easy way for relatively recent (IE8+) to accomplish this elegantly.

Bear in mind this answer (and the question) are both from 2010, half a decade ago, back when IE6 was still under active support for many developers. Additionally the CSS methods for achieving table borders at the time were impossible for pretty much every HTML email renderer available. Thanks for the necromancy, though!

Источник

HTML table border only in middle

Try it Yourself » Contextual Classes Contextual classes can be used to color table rows ( ) or table cells ( ): The classes that are used to add borders are referred as Additive classes and those that are used to remove borders are referred as subtractive classes .

HTML table border only in middle

I’m looking to make a table with a line right down the middle with CSS. No other borders aside from the center of the table. My table is 2×4
I tried to use the attached code but it adds lines on outside left and right

You can change your td rule to use the first-child pseudo class like:

Css — HTML table border only in middle, HTML table border only in middle. Ask Question Asked 4 years, 2 months ago. Modified 4 years, No other borders aside from the center of the table. My table is 2×4 I tried to use the attached code but it adds lines on outside left and right < border-right: solid 1px #f00; >Example: table < border-collapse: … Code sampletable tr

Bootstrap Tables

Bootstrap Basic Table

A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table:

Example

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Striped Rows

The .table-striped class adds zebra-stripes to a table:

Example

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Bordered Table

The .table-bordered class adds borders on all sides of the table and cells:

Example

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Hover Rows

The .table-hover class adds a hover effect (grey background color) on table rows:

Example

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Condensed Table

The .table-condensed class makes a table more compact by cutting cell padding in half:

Example

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Contextual Classes

Example

Firstname	Lastname	Email
Default	Defaultson	def@somemail.com
Success	Doe	john@example.com
Danger	Moe	mary@example.com
Info	Dooley	july@example.com
Warning	Refs	bo@example.com
Active	Activeson	act@example.com

The contextual classes that can be used are:

Class	Description
.active	Applies the hover color to the table row or table cell
.success	Indicates a successful or positive action
.info	Indicates a neutral informative change or action
.warning	Indicates a warning that might need attention
.danger	Indicates a dangerous or potentially negative action

Responsive Tables

The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:

Example

Complete Bootstrap Table Reference

For a complete reference of all table classes, go to our complete Bootstrap Tables Reference.

Bootstrap Tables, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML and more. A basic Bootstrap table has a light padding and only horizontal dividers. The .table class adds The .table-bordered class adds borders on all sides of …

Borders in bootstrap with examples

Borders: Borders are generally used to display an outline around a box or table cell or any other HTML element. In Bootstrap, there are different classes available to add or remove borders. The classes that are used to add borders are referred as Additive classes and those that are used to remove borders are referred as subtractive classes .
Additive Border Classes :

• .border : This class adds a border all around the element.
• .border-top : This class adds a border on the top edge of the element.
• .border-left : This class adds a border on the left edge of the element.
• .border-right : This class adds a border on the right of the element.
• .border-bottom : This class adds a border on the bottom of the element.

Subtractive Border Classes :

• .border-0 : This class removes border from all around the element if exists.
• .border-top-0 : This class removes the border from the top edge of the element if exists.
• .border-left-0 : This class removes the border from the left edge of the element if exists.
• .border-right-0 : This class removes the border from the right of the element if exists.
• .border-bottom-0 : This class removes the border from the bottom of the element if exists.

Below program uses all of the additive and subtractive classes to add and remove borders:

Источник

HTML Table Borders

HTML tables can have borders of different styles and shapes.

How To Add a Border

To add a border, use the CSS border property on table , th , and td elements:

Example

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse .

This will make the borders collapse into a single border:

Example

Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:

Example

table, th, td <
border: 1px solid white;
border-collapse: collapse;
>
th, td <
background-color: #96D4D4;
>

Round Table Borders

With the border-radius property, the borders get rounded corners:

Example

Skip the border around the table by leaving out table from the css selector:

Example

Dotted Table Borders

With the border-style property, you can set the appearance of the border.

The following values are allowed:

Example

Border Color

With the border-color property, you can set the color of the border.

Example

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How can I apply a border only inside a table?

The border is around the whole table and also between table cells. What I want to achieve is to have border only inside the table around table cells (without outer border around the table). Here is markup I’m using for tables (even though I think that is not important):

 
 
Heading 1
 
Heading 2
 
 
Cell (1,1)
 
Cell (1,2)
 
 
Cell (2,1)
 
Cell (2,2)
 
 
Cell (3,1)
 
Cell (3,2)
 
 
 

I see only borders only around the cells. Since each of the cells have a border, it appears that the table has a border. Perhaps I don’t get the question?

10 Answers 10

If you are doing what I believe you are trying to do, you’ll need something a little more like this:

table < border-collapse: collapse; >table td, table th < border: 1px solid black; >table tr:first-child th < border-top: 0; >table tr:last-child td < border-bottom: 0; >table tr td:first-child, table tr th:first-child < border-left: 0; >table tr td:last-child, table tr th:last-child

The problem is that you are setting a ‘full border’ around all the cells, which make it appear as if you have a border around the entire table.

EDIT: A little more info on those pseudo-classes can be found on quirksmode, and, as to be expected, you are pretty much S.O.L. in terms of IE support.

With simple tables like this, there’s a much shorter solution which avoid using pseudo-classes by using the next sibling combinator. See my answer.

tested in FF 3.6 and Chromium 5.0, IE lacks support; from W3C:

Borders with the ‘border-style’ of ‘hidden’ take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.

Example of a very simple way for you to achieve the desired effect:

 
 
1111
 
2222
 
3333
 
 
4444
 
5555
 
6666
 
 
 

«MAGIC» EXPLAINED: frame and rules are OLD (not HTML5) table attributes (you should use CSS instead). frame says which parts of outside table borders should be visible — void means hide all outside borders. rules says which parts of inside table borders should be visible — all means all of them. obviously. Please don’t use this, unless you are HTML3 fanatic . 🙂

Adding something like border: 1px solid black will make sure the outer bound of the table gets a border.

Worked like a charm in 2020 to quickly add some readability to a ridiculously spaced table in a website I was reading. Actually, just this was enough for the internal borders: rules=»all»

I used this for an E-mail body and worked like charm (2023) since CSS rules sometimes can be tricky in an E-mail body.

For ordinary table markup, here’s a short solution that works on all devices/browsers on BrowserStack, except IE 7 and below:

table < border-collapse: collapse; >td + td, th + th < border-left: 1px solid; >tr + tr

For IE 7 support, add this:

Great — as this also allows one to set a different border to the table, rater than just not displaying it.

Due to mantain compatibility with ie7, ie8 I suggest using first-child and not last-child to doing this:

table tr td table tr td:first-child table tr:first-child td

This is a great solution. But be careful, if you have another table in one of your table cells and want to see the inner borders you need another set of CSS lines for your «inner» table

i just tried it, no table border. but if i set a table border it is eliminated by the border-collapse.

   table < border-collapse: collapse; border-spacing: 0; >table < border: 0; >table td, table th  
 
Heading 1
 
Heading 2
 
 
Cell (1,1)
 
Cell (1,2)
 
 
Cell (2,1)
 
Cell (2,2)
 
 
Cell (3,1)
 
Cell (3,2)
 
 
   

that will do it all without css

Works for any combination of tbody/thead/tfoot and td/th

table.inner-border < border-collapse: collapse; border-spacing: 0; >table.inner-border > thead > tr > th, table.inner-border > thead > tr > td, table.inner-border > tbody > tr > th, table.inner-border > tbody > tr > td, table.inner-border > tfoot > tr > th, table.inner-border > tfoot > tr > td < border-bottom: 1px solid black; border-right: 1px solid black; >table.inner-border > thead > tr > :last-child, table.inner-border > tbody > tr > :last-child, table.inner-border > tfoot > tr > :last-child < border-right: 0; >table.inner-border > :last-child > tr:last-child > td, table.inner-border > :last-child > tr:last-child > th

 
 
 
head1,1
 
head1,2
 
head1,3
 
 
head2,1
 
head2,2
 
head2,3
 
 
 
1,1
 
1,2
 
1,3
 
 
2,1
 
2,2
 
2,3
 
 
3,1
 
3,2
 
3,3
 
 
 
foot1,1
 
foot1,2
 
foot1,3
 
 
foot2,1
 
foot2,2
 
foot2,3
 
 
 

Источник