How do I set <table> border width with CSS?

HtmlCss

Html Problem Overview

Why does this work?

<table border=1>

And this doesn't?

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

I get the same result in Chrome and in IE9.

Html Solutions

Solution 1 - Html

Doing borders on tables with css is a bit more complicated (but not as much, see this jsfiddle as 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>

Solution 2 - Html

The default border-style is none, so you must specify that as well as the width and the colour.

You can use the border shorthand property to set all three values in one go.

Also, the border attribute describes the border for the table and the cells. CSS is much more flexible so it only describes the border of the elements you are selecting. You need to select the cells too in order to get the same effect.

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

See also border properties and tables in CSS.

Solution 3 - Html

The reason it didn't work is that despite setting the border-width and the border-color you didn't specify the border-style:

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

JS Fiddle demo.

It's usually better to define the styles in the stylesheet (so that all elements are styled without having to find, and change, every element's style attribute):

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

JS Fiddle demo (Or using shorthand border notation).

Solution 4 - Html

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

This should work. I use the shorthand syntax for borders.

Solution 5 - Html

You need to add border-style like this:

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

or like this:

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

Solution 6 - Html

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

This only adds a border around the table.

If you want same border through CSS then add this rule:

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

and one thing for HTML table to avoid spaces

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

Solution 7 - Html

Like this:

border: 1px solid black;

Why it didn't work? because:

> Always declare the border-style (solid in my example) property before the border-width > property. An element must have borders before you can change the > color.

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Pass a javascript variable value into input type hidden value

JavascriptHtml

Next Solution:

In Windows 7 Git Bash, is there a way to explore the directory at the current location?

ShellWindows 7CmdGit Bash

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionButtle ButkusView Question on Stackoverflow
Solution 1 - HtmloeziView Answer on Stackoverflow
Solution 2 - HtmlQuentinView Answer on Stackoverflow
Solution 3 - HtmlDavid ThomasView Answer on Stackoverflow
Solution 4 - HtmlTJHeuvelView Answer on Stackoverflow
Solution 5 - HtmlKimtho6View Answer on Stackoverflow
Solution 6 - HtmlSenad MeškinView Answer on Stackoverflow
Solution 7 - HtmlNathan QView Answer on Stackoverflow