Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Thin Black Border for a Table

Tags:

html

css

enter image description here

I need to have such thin line for the whole table as seen above. The above image is a sample only. My solution, doesn't work. The table shows no border at all.

Here is my CSS:

table {     border-width: thin;     border-spacing: 2px;     border-style: none;     border-color: black; } 
like image 658
user311509 Avatar asked Dec 14 '11 00:12

user311509


People also ask

What 3 types of border styles can a table have?

border-bottom-style. border-left-style. border-right-style.

How do you add a border to a table?

Click the Table Design tab.) Click Border Styles and choose a border style. Click Borders and choose where you want to add the borders. Tip: To change or add borders for part of your table, check that Border Painter is selected and then, in the table, click each border that you want to change or add.

How do I create a thin border table in HTML?

In this quick tips, we will see a way to render an HTML table with single line(thin) border. Now, to have the HTML table to be rendered as Fig. B with thin border, we need to add style attribute with css property border-collapse set to collapse.

How do I add a border to a table body?

To add a border to your table, you need to define the <style> of your table. Remember to add borders also for <th> and <td> tags to have a complete table. Set the border-collapse property as well (if you don't define the border-collapse, it will use border-collapse: separate by default).


1 Answers

Style the td and th instead

td, th {     border: 1px solid black; } 

And also to make it so there is no spacing between cells use:

table {     border-collapse: collapse; } 

(also note, you have border-style: none; which should be border-style: solid;)

See an example here: http://jsfiddle.net/KbjNr/

like image 116
Petah Avatar answered Sep 30 '22 04:09

Petah