I have the following:
<table class="floatleft" style="margin-right:1em;margin-bottom:1em;border:4px;">
Although I have a border around the table, no border shows up. Any idea?
You have specified border: 4px which means the same as:
border-width: 4px;
border-style: none;
border-color: <the value of the 'color' property>;
… because unspecified values take their initial value in shorthand syntax.
Be explicit about the style and colour:
border: 4px solid black;
(or at least the style, since none will stop any border being visible).
Probably because you have a white background and you're not setting a border style and color. Try:
<table class="floatleft" style="margin-right:1em;margin-bottom:1em;border:4px solid red;">
<tr><td>Hello</td></tr>
</table>
http://jsfiddle.net/karim79/qWLvf/
Related
I would like to use the color #644220 for the border of my input field. I have tried it like this:
HTML
<input class="my_border" type="text">
CSS
.my_border {
width:100%;
padding: 20px;
outline: none;
border-width: 0 0 1px 50px;
border-color: #644220;
}
https://jsfiddle.net/9dss92v6/1/
When I use red or any other HEX code, it will work for me. It won't only accept the code #644220. And #644220 is an existing color as you see here.
Not even the RGB code (border-color: rgb(100, 66, 32);) is working.
What is wrong with it?
From MDN:
Note: The default value of border-style is none. This means that if
you change the border-width and the border-color, you will not see the
border unless you change this property to something other than none or
hidden.
Now I assume that browsers are not following this and they show some solid default border by default. [1]
You need to define a style for your border for example solid
border-style: solid;
Demo
[1] Was playing further with this, turns out that it's weird behavior I think from the browsers point of view. If am using a word like red or tomato as color names, it works but still, the color is not the one we expect it to be for example this vs this.
I will update this thread if I got any solid reasoning for this.
Edit 3:
Debugging further, it turns out that the default value Chrome sets is inset for border, i.e, border-style: inset;, which has grayish border which is like a shadow. Hence, your color does render but it mixes with the inset border being set by Chrome defaults. Now am not sure why the color is not overridden by the color declaration you have in your stylesheet, might be a bug.
Add border-style for it:
.my_border {
width:100%;
padding: 20px;
outline: none;
border-width: 0 0 1px 50px;
border-color: #644220;
border-style: solid;
}
You may want to combine the properties of your border in one line like this:
.my_border {
width:100%;
padding: 20px;
outline: none;
border: 10px solid #644220;
}
You can always change the thickness of the border. I made it in 10px so it will be visible.
I was wondering how to get these type of lines on a table
When I try to give the the <table> a "border right" property, it gives broken space between each cell.
border-right: 2px solid gray ;
HTML
<tr class="bordered">
CSS
.bordered
{
border-right: 2px solid gray ;
}
replace gray with any color you want like #cccccc
Do you want something similar like this example
.td
{
border-right: #ccc 1px solid;
}
I think what you are looking for is a vertical rule. Html has a horizontal rule
<hr>
However, it does not have a vertical rule. You can accomplish this with a bit of css though. For example
<div style="border-left:1px solid #000;height:500px"></div>
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.
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>
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.
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).
<table style='border:1px solid black'>
<tr>
<td>Derp</td>
</tr>
</table>
This should work. I use the shorthand syntax for borders.
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;">
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.
<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">
How can I create a table with double border: the outer border of 1 px and the inner border of 10px?
This border is only necessary on the table, not between cells.
Thank you.
Without adding extra tags that would break your semantics, I would recommend combining <table> and <tbody> and style them with CSS:
HTML:
<table id="cow">
<tbody>
<tr><td>Foo</td><td>Bar</td></tr>
<tr><td>Foo</td><td>Bar</td></tr>
<tr><td>Foo</td><td>Bar</td></tr>
</tbody>
</table>
CSS:
#cow {
border: 1px solid #000;
}
#cow tbody {
display: block;
border: 10px solid #ccc;
}
Working example here.
An alternative approach would be to wrap your table in a containing <div> element. You would then apply the 1 pixel border to the <div> and the 10 pixel border to the <table>. This will definitely work, but will be a less semantic approach. Another downside to this is that the <div> width will default to the maximum width available, resulting in a larger 1 pixel border than your actual table width (see example).
you can take the table in a div tag and then give div tag 1px border and inner table 10 px border.
border-style: double;
border-width: thin;
I am trying to define a border around a div tag in HTML. In some browsers the border does not appear.
Here is my HTML code:
<div id="divActivites" name="divActivites" style="border:thin">
<textarea id="inActivities" name="inActivities" style="border:solid">
</textarea>
</div>
How do I set a border for an HTML div tag?
Try being explicit about all the border properties. For example:
border:1px solid black;
See Border shorthand property. Although the other bits are optional some browsers don't set the width or colour to a default you'd expect. In your case I'd bet that it's the width that's zero unless specified.
can use
border-width:2px;
border-style:solid;
border-color:black;
or as shorthand
border: 2px solid black
As per the W3C:
Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set.
In other words, you need to set a border style (e.g. solid) for the border to show up. border:thin only sets the width. Also, the color will by default be the same as the text color (which normally doesn't look good).
I recommend setting all three styles:
style="border: thin solid black"
You can use:
border-style: solid;
border-width: thin;
border-color: #FFFFFF;
You can change these as you see fit, though.
I guess this is where you are pointing at ..
<div id="divActivites" name="divActivites" style="border:thin">
<textarea id="inActivities" name="inActivities" style="border:solid">
</textarea>
</div>
Well. it must be written as border-width:thin
Here you go with the link (click here) check out the different types of Border-styles
you can also set the border width by writing the width in terms of pixels.. (like border-width:1px), minimum width is 1px.
You need to set more fields then just border-width. The style basically puts the border on the page. Width controls the thickness, and color tells it what color to make the border.
border-style: solid; border-width:thin; border-color: #FFFFFF;
.centerImge {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height:50%;
}
<div>
#foreach (var item in Model)
{
<span> <img src="#item.Thumbnail" class="centerImge" /></span>
<h3 style="text-align:center"> #item.CategoryName</h3>
}
</div>
In bootstrap 4, you can use border utilities like so.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.border-5 {
border-width: 5px !important;
}
</style>
<textarea class="border border-dark border-5">some content</textarea>