I am trying to add a line(solid border, color) to a td. How can I trim line top and bottom with 2 px or add padding top and padding bottom to line?
My expected output would be
I have a black border for a td with height 10 px. I want to make top 2px and bottom 2 px of that line to white color or apply 2 px padding to that line.
I am trying to separate 2 tds in a table with icons in side each td.I am trying to add a line between 2 tds with a line. I am adding border style of td to make it look like a line. I want that line height to be small and not touching td top and bottom borders.
My code in fiddle is here
.leftLine {
border-left-style: solid;
border-left-color: lightgray;
border-left-width: 1px;
padding-bottom: 2px;
border-bottom-left-radius: 2px;
height: 2px;
}
.icoContainer {
text-align: center;
width: 40px;
}
To adjust the spacing just use padding-top: ***px and padding-bottom: ***px in each <td>.
Similar for the borders: border-top: solid black 2px and border-bottom: solid black 2px
I didn't completely get your Question:
But according to my understanding you are trying to give left border to a single td and you want its height should be small.
This cannot be achieved by adding border style to td direcetly.
I would suggest to use below code:
CSS CODE would be:
.leftLine {
border-left: solid black 1px;
margin: 0px;
padding : 0px;
}
.icoContainer {
text-align: center;
padding-top : 5px;
padding-bottom: 5px;
}
h1{
margin: 0px;
padding: 0px;
}
Add "leftLine" css to the innder div of the TD.
and you can change padding of "icoContainer".
This will add padding to TD and border to inner div.
Please let me know if my understanding about your question is correct.
Related
I have an image on my webpage that I added padding to so it wouldn't be in the corner. I also wanted to give it a border but the border is showing up around the empty space instead of just the image... What am I doing wrong?
The image also has a float attribute.
img {
float: right;
width: 300px;
padding: 25px;
border-style: solid;
border-color: #fdb924;
}
Give the image a margin instead of padding:
img {
float: right;
width: 300px;
margin: 25px;
border-style: solid;
border-color: #fdb924;
}
<img src="https://via.placeholder.com/250">
Change the padding to margin. padding is the space between the border and the image, while margin is the space between the border and everything outside of it: https://jsfiddle.net/632t5g8x/
On my site I have added a border-left to the sidebar. The issue I have is that this border is very close to the text to the left of it and I would like to move the border slightly to the right. I have tried various ways of doing this, but all were unsuccessful.
.blog-sidebar {
width: 250px;
border-left: 1px solid #000000;
}
Have you tried adding a margin on the left-hand side? For example:
.blog-sidebar {
width: 250px;
border-left: 1px solid #000000;
margin-left: 20px;
}
That should give you some space between the border and the content on the left.
For reference, see the CSS box model
http://www.w3schools.com/css/css_boxmodel.asp
I have some table, based on divs. When table row is hovered, i want to add borders to the top and bottom of it. But in spite of box-sizing: border-box, my block becomes 2 pixels bigger. Row can't have fixed height.
Here is example: https://jsfiddle.net/j4nwdju6/
I can't just add invisible or transparent borders, because it will spawn whitespaces between rows.
You can offset this by adjusting the top & bottom margins on the hovered state:
JS fiddle
.row:hover {
background: yellow;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin: -1px 0;
}
Add border to your rows so that it wont jump while hovering
.row {
display: flex;
border:1px solid white;
}
Updated fiddle : https://jsfiddle.net/j4nwdju6/1/
A really simple hack would be to add margin-top: -2px; to the :hover styles, so that the position doesn't change: JSFiddle.
You may add a transparent border in .row like this
.row {
display: flex;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
This will not affect the height of div on hover.
UPDATE
To remove white space b/w rows add margin-top:-2px . Check this fiddle.
I have a menu, when the menu item is active it should have a border to the right, the issue is that the border is doesn't render correctly, please notice the bottom edge of the border.
This image shows the issue:
http://imgur.com/FC1n8qA
Jsfiddle: http://jsfiddle.net/2yj3hyqm/5/ (See full screen for better view)
CSS code:
.border {
border-right:4px solid #000;
}
Thanks,
The rendering is correct.
Take a look at this:
border: 10px solid black;
border-right-color: red;
border-bottom-color: blue;
border-left-color: green;
Note how the borders meet at the corners. Your menu items have a thick right border and a thin bottom border. The way borders meet at the corners the thick right border looks slightly crooked at the bottom. Try and remove the bottom border and see how the right border gets straight again.
You can try nesting elements in the menu item and apply the border-bottom and border-right to different elements or use a pseudo element to fix the appearance.
As mentioned, the problem is the bottom border overlaping the right one. So, a possible solution is to "fake" a border using :after pseudo, placing it at the right of the element:
Updated JSFIDDLE
.border {
position: relative;
}
.border:after {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 4px;
background: black;
content: "\00a0"; /* invisible content */
}
Borders meet at angles so you would have to use an alternative for the right border
A box-shadow would work quite well
JSfiddle Comparison (exaggerated)
HTML
<div class="border"> </div>
<div class="shadow"> </div>
CSS
.border,
.shadow {
background-color: grey;
width:100px;
height:100px;
margin-bottom: 10px;
border-bottom: 5px solid lightgrey;
}
.border{
border-right: 20px solid black;
}
.shadow {
box-shadow: 10px 0 0px 0 black;
}
I've tried for a while on this one and can't seem to figure it out. Why does my HTML table have double borders around it? I just want one border that has rounded edges. Currently, I have one border that is rounded, and once border that is straight. I also need the border that divides the cells.
It seems strangely difficult to get this to work... Did I do something wrong here?
The CSS:
.bottom-table {
border-collapse: separate !important;
border-radius: 10px !important;
width: 75%;
text-align: center;
margin-right: auto;
margin-left: auto;
}
#bottomTable{
padding-bottom: 50px;
}
.bottom-table td {
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 40px;
vertical-align: top;
}
jsFiddle Demo
It doesn't, your table has one and your td elements have the other border. Remove one:
.bottom-table td {
border: 0;
}
See it here: http://jsfiddle.net/shomz/5km7h/3/
And to add a cell divider, you can add a right border to the left cell, for example:
.bottom-table td:first-child {
border-right: 1px solid;
}
See here: http://jsfiddle.net/shomz/5km7h/4/
The table has a single border but each table cell has a border of its own.
Use border-collapse: collapse instead of separate to merge touching cell and table borders or set border: 0 for the table cells to remove the inner borders entirely.
Demo Fiddle
Change border-collapse:seperate to collapse
It is because default borders are applied to the cells, by using seperate you are effectively saying for each cell to have seperated borders (defined by border-spacing)
More on border-collapse from MDN
The border-collapse CSS property selects a table's border model. This
has a big influence on the look and style of the table cells.
The separated model is the traditional HTML table border model.
Adjacent cells each have their own distinct borders. The distance
between them given by the border-spacing property.
With rounded edges
To maintain the rounded edges, you will need to employ a few tricks- namely apply the border to the parent div with the rounded edges, then add a border to the right hand side of the first cell, DEMO HERE, CSS:
#bottomTable {
border:1px solid;/* <-- add border to parent div */
border-radius:10px;/* <-- round corners */
}
.bottom-table {
border-collapse:collapse;/* <-- collapse table borders */
width: 75%;
table-layout:fixed;
text-align: center;
margin-right: auto;
margin-left: auto;
border:none;/* <-- remove default border*/
}
.bottom-table td:first-child {
border-right:1px solid;/* <-- add border to first cell */
}
.bottom-table td {
border:none;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 40px;
vertical-align: top;
}