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>
Related
Horizontal line
how to create the horizontal line with dash length as shown in image using CSS.
This is what i've tried
CSS
hr{
border-bottom: 1px dotted grey;
}
but i am unable get the same stroke length as shown in the image.
Try the below code: Use border css property.
hr{
border: 1px dashed #ccc;
}
<p> hello </p>
<hr/>
try border-bottom : 1px dashed;
This is such an easy "google search". Do some work before you come and ask questions.
In below example I have two divs:
Both have the same content and almost the same style, except that the second div has one more style:
border: 1px solid black;
The problem is that this border is doing a resize of the internal content and I don't want this. I want to put a border on some divs on the page dynamically during the page load, but without chage any measures or changes in the content.
Has a way of doing this? I can use javascript if necessary, but a solution that only use css will be more apreciated.
Instead of border use outline
div.border
{
outline: 1px solid black;
}
DEMO
You can also use a transparent border, like: border: 1px solid transparent;
Then apply any other color you want.
You can use transparent borders, then when you will apply border color the size will remain the same. Here is a fiddle
html
<div>
</div>
css
div {
border:2px solid transparent;
width:200px;
height:200px;
background:#eeeeee;
margin:10px;
}
js
$("#red").on('click',function() {
$("div").css("border","2px solid red");
});
$("#transparent").on('click',function() {
$("div").css("border","2px solid transparent");
});
You have 2 options.
Use css : 1px solid transparent; and
Use css : box-sizing:border-box;
I am trying to make an <input> text field with the color code #7d5993, but I see that the top and left are black and the bottom and right are my color. Is there any way to make the entire border my color like how the <textarea> would look?
Here's my code.
You must add property border-style override default border style of the textarea and input
border-style:solid;
You can check this fiddle
You have to define border-style:solid also like this:
input{border:2px solid red;}
Check this http://jsfiddle.net/7kE7R/15/
Try this
input{border: 1px solid #7d5993; border-width:2px;}
input:focus{border: 1px solid #5190dd; border-width:2px;outline:none;}
textarea{border: 1px solid #7d5993;border-width:2px;}
textarea:focus{border: 1px solid #5190dd; border-width:2px; outline:none;}
you have to use
border-style:solid
check out my solution here
http://jsfiddle.net/fvN8T/
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">
I have a div with an id of 'gallery' and I want to style the images inside it. Specifically, I want to give each of the images a 1px solid yellow border except on the bottom because they sit on top of each other, so I don't want to double the border on the bottom.
What I'm confused about is how to choose between the different border style elements: border, border-style, border-width. I tried this:
div#gallery img
{
border-width:1px;
border-style:solid;
border: solid yellow;
border: 1px 1px 0px 1px;
}
I managed to get a yellow border with this css above but the border seems more like a 2px border - it's quite thick - and, besides that, the syntax I'm using doesn't look very elegant.
Any recommendations on how to do this more concisely/elegantly?
I think this is the best way:
border: 1px solid yellow;
border-bottom: none;
The syntax for the border declaration goes width style color and affects all four borders. After that, you can override the bottom back to using no border by declaring border-bottom as none.
I don't really know if there's a wrong way to do it, but you basically have 3 methods to do it:
Method 1
border-top: 1px solid yellow;
border-right: 1px solid yellow;
border-left: 1px solid yellow;
Method 2
border: 1px solid yellow;
border-bottom: 0;
Method 2
border: 1px solid yellow;
border-bottom: none;
I would prefer either method 2 or method 3.
(I know method 2 and method 3 are basically the same, but I wanted to give both solutions, so you can choose what you like, "none" or "0").