I have created div table but got an issue with border spacing not perfect for me. I have tired border spacing border collapse separate border collapse but no luck.
Need: All border should be clean 1px. I just upload an example snapshot.
jsfiddle.net/abilashu/w70a4ups/17/
use the border-collapse: collapse instead of separate.
div.blueTable {
border: 1px solid yellow;
background-color: #848EA4 ;
width: 100%;
text-align: left;
border-collapse:collapse;
border-spacing: 0;
}
Related
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'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;
}
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.
Basically, I want to space my tds apart from each other horizontally. In Firefox, it works fine by setting a margin, but the margin doesn't work in chrome. So I tried the following and applied it to the table
border-spacing: 40px;
border-collapse: separate;
Moreover, that solution worked in chrome, but NOT Firefox; even though guides suggested that I need the border-collapse: separate to have it work in firefox.
Without any further detail, here's the code for the table styling (the one that works in Firefox):
#tstyle3 {
margin: 10px 0 0 0px;
width: 750px;
border-collapse: separate;
}
#tstyle3 tr {
height: 270px;
border-bottom: none;
border-collapse: separate;
width: 950px;
display: inline-block;
}
#tstyle3 td {
border-top: none;
display: inline-block;
position: relative;
border-collapse: separate;
margin: 0 30px 0 0;
height: 220px;
width: 220px;
background-color: white;
float: left;
box-shadow: 0px 3px 5px #b5b6b6;
}
And the situation recreated in jsfiddle (which shows how it appears in Firefox)
http://jsfiddle.net/JjZNb/
What about you try something more sexy like
float:left; display:block;
http://jsfiddle.net/JjZNb/1/
Margin does not work for td elements.
That's not quite right. Margin doesn't work for table cells (so elements with display:table-cell. But the CSS above styles the <td> elements with display: inline-block, so they aren't table cells anymore and margin should be applying to them.
You can add spacing by specifying a border size, or padding for your td elements.
td{border:8px solid #fff;}
or for padding
td{padding:0 10px;}
or when border styles are already defined,
td{border-width:2px;}
or for each side
td{border-width:0 2px 0 2px;}
/* top right bottom left*/
here is a jsFiddle that demonstrates the above http://jsfiddle.net/VjkP9/
I have a trouble with setting borders for table cells which have relative position style: fiddle example
table {
border-collapse: collapse;
}
td {
border: 1px solid green;
position: relative;
}
It looks ok in FF and Chrome:
But in IE i see doubled cell borders:
This doubled borders appears only if td relative positioned.
I know as workaround it is possible to remove border from table cell and put additional div with border inside of table cell.
But maybe there is another way to solve this issue in IE?
EDIT:
I managed to display borders combining cells and table border styles:
http://jsfiddle.net/GaTHZ/4/
This will solve it. Worked in IE and Chrome.
table {
border-collapse: collapse;
margin-right:30px;
margin-left:30px;
border-right: 1px solid green;
border-bottom: 1px solid green;
}
td {
border-left: 1px solid green;
border-top: 1px solid green;
width: 200px;
height: 35px;
position: relative;
}