How to set the width of a <table> frame using CSS?

Question

Why does this work?

<table border=1> 

And is that not so?

 <table style="border-width:1px;border-color:black"> 

I get the same result in Chrome and in IE9.

Answer 1

Doing table borders using css is a bit more complicated (but not so much, see this jsfiddle for an example ):

 table { border-collapse: collapse; border: 1px solid black; } table td { border: 1px solid black; } 

 <table> <tr> <td>test</td> <td>test</td> </tr> </table> 

Answer 2

By default, border-style is none , so you must specify this, as well as the width and color.

The border hiding property can be used to set all three values ​​at a time.

In addition, the border attribute describes the border for tables and . CSS is much more flexible, so it only describes the borders of the selected elements. You also need to select cells to get the same effect.

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

See also border and table properties in CSS .

Answer 3

The reason it doesn't work is that, despite setting border-width and border-color , you did not specify border-style :

 <table style="border-width:1px;border-color:black;border-style:solid;"> 

JS Fiddle demo .

It is usually better to define styles in the stylesheet (so that all elements are styled without having to find and modify each style attribute):

 table { border-color: #000; border-width: 1px; border-style: solid; /* or, of course, border: 1px solid #000; */ } 

JS Fiddle demo ( Or using the abbreviation border ).

Answer 4

 <table style='border:1px solid black'> <tr> <td>Derp</td> </tr> </table> 

That should work. I use shorthand syntax for borders.

Answer 5

You need to add a border style as follows:

 <table style="border:1px solid black"> 

or like this:

 <table style="border-width:1px;border-color:black;border-style:solid;"> 

Answer 6

 <table style="border: 5px solid black"> 

This adds only the border around the table.

If you want to get the same border through CSS, add this rule:

 table tr td { border: 5px solid black; } 

and one thing for an HTML table to avoid spaces

 <table cellspacing="0" cellpadding="0"> 

Answer 7

Like this:

 border: 1px solid black; 

Why didn't it work? because:

Always declare a border-style (solid in my example) property before a property border. The item must have borders before you can change the color.