Html table with no bottom border

How to Add a Border-Bottom to the Table Row

If you want to add a border only to the bottom of the table row, you can apply the CSS border-bottom property to elements that are placed within a tag.

Let’s see this solution in use.

Example of adding a border-bottom to the table row:

html> html> head> title>Title of the document title> style> tr.border-bottom td < border-bottom: 1pt solid #ff000d; > style> head> body> table> tbody> tr class="border-bottom"> td>Text 1 td> td>Text 2 td> tr> tbody> table> body> html>

Result

Example of removing the spacing between elements with CSS:

html> html> head> title>Title of the document title> style> table < border-collapse: collapse; > tr.border-bottom < border-bottom: 1px solid #ff000d; > style> head> body> table> tbody> tr class="border-bottom"> td>Text 1 td> td>Text 2 td> tr> tbody> table> body> html>

Источник

CSS: no top,right and bottom border on a table cells

I am trying to get a table with the last column cells (and header) having nor right, top and bottom border. I have searched Sobut i am unable to make what I found work, This fiddle shows what I have tried: https://jsfiddle.net/prtome/taqge61v/ HTML

 
 
 
col1
 
col1
 
col no border
 
 
a
b
cell no border
 
 

.asktable < border-collapse: collapse; border: 1px solid #ccc; >.asktable th < padding: 4px 8px; border: 1px solid #ccc; >.asktable td < padding: 4px 8px; border: 1px solid #ccc; >.asktable th.no-border-right

4 Answers 4

You have a border set on the whole table so even with this removed from the th and td the border will still appear.

Also as a side note, you can do away with the extra classes to remove the border by using :last-child and omit the !important .

Ive edited your CSS below.

.asktable < border-collapse: collapse; >.asktable th < padding: 4px 8px; border: 1px solid #ccc; >.asktable td < padding: 4px 8px; border: 1px solid #ccc; >.asktable th:last-child, .asktable td:last-child

 
 
col1
 
col1
 
col no border
 
 
a
 
b
 
cell no border
 
 
 
 
 
col1
 
col1
 
col no border
 
 
a
 
b
 
ccell no border
 
 

Источник

Add border-bottom to table row

I have a table of 3 by 3. I need a way to add a border for the bottom of every row tr and give it a specific color. First I tried the direct way, i.e.:

That still didn’t work. I would prefer to use CSS because then I don’t need to add a style attribute to every row. I haven’t added a border attribute to the

. I hope that that is not affecting my CSS.

As a side note, if inline styling (first example in your question) isn’t working then it’s unlikely that embedded styling (second example) will work. You should also research the availability of attributes for the element you’re attempting to style: w3.org/TR/html-markup/tr.html

Just a note to encourage future searchers to scroll down to @Nathan Manousos’s answer, below — it’s probably the solution you’re looking for

18 Answers 18

Example

You are wrong, @Renan . The collapsing border model is exactly what makes row borders stylable. According to CSS sectoin 17.6: In the separate border model “Rows, [. ] cannot have borders (i.e., user agents must ignore the border properties for those elements).” “In the collapsing border model, it is possible to specify borders that surround all or part of a cell, row [and] row group [. ]” And by the way: it does work in my browser (Chromium 37).

I think some people might be getting confused (like I did) and aren’t noticing that the border-collapse style needs to be set on the table, not the row.

Источник

How to specify the bottom border of a ?

See my edit to this post. This is a bare bones html document, but I’ve added the !important clause to the style. This was done because, in your case, I can’t tell what other styles have been defined and if any of these may have a higher specificity (i.e., priority) than what we’re adding.

style=»border-bottom: solid 1px black !important;» on td worked for me. However I had to add style=»border-collapse: collapse;» to table in order not to get gaps between the borders of adjacent cells.

Add border-collapse:collapse to the table.

table.myTable < border-collapse:collapse; >table.myTable tr

Like stated before this really should be the accepted answer. Adding the elements to your table will not do what you think it will. That is to say if you don’t want to add more html to your page and rework your tables. this is the simplest solutions I’ve seen thus far.

You should define the style on the td element like so:

This is a good approach. The only thing I would caution against is that the size of the html render will grow in proportion to the number of TD elements in the table to class. If size is a concern, we will be more effective by targetting the table element itself a la table#idForTable tr td . One clause for the whole set of rows.

or if you want the border inside the TR tag, you can do this:

What I want to say here is like some kind of add-on on @Suciu Lucian’s answer.

The weird situation I ran into is that when I apply the solution of @Suciu Lucian in my file, it works in Chrome but not in Safari (and did not try in Firefox). After I studied the guide of styling table border published by w3.org, I found something alternative:

table.myTable < border-spacing: 0; >table.myTable td

Yes you have to style the td instead of the tr .

Источник