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;
}
Related
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;
}
How can one size elements in a table using both a percentage width and a fixed amount of padding for each element?
Specifically, I would like all columns except for the last to have a padding-right: 20px and I would like to size the widths of the columns using percent. I thought that the following css (scss actually) would do it:
table {
width: 200px;
table-layout: fixed;
colgroup {
.c1 {
width: 50%;
}
.c2 {
width: 40%;
}
}
td {
border: 0px;
padding-left: 0px;
padding-right: 20px;
word-break: break-all;
}
td:last-child {
padding-right: 0px;
}
}
Here's a jsfiddle for the above:
https://jsfiddle.net/speedplane/w0aLar56/4/
The SCSS should result in a table with columns that add up to 200px, but on Chrome they only add up to 192px and on Firefox they add up to 196px. I'm clearly doing something wrong.
How should one set fixed padding and percent width to table cells?
I suppose different browsers have different defaults for border-spacing because border-spacing: 0px; on the table seems to fix it.
I'm tired of searching and not being able to accomplish this: 1 label at top left of a cell and the content at the bottom center. Trying to achieve this, I'm using 2 divs inside a TD, but I don't mind changing that as long as I can achieve the goal.
I don't know the size of the labels (they can be translated into different languages and therefore taking different sizes).
The original table will be taking half of an A4 Portrait in height. It's 7 (row) * 5 (columns) (with the exception of 1 single cell in the middle of it that I use rowspan="2")
I've tried the "set the parent to position: relative and make the container position: absolute; bottom: 0" solution and I can't make it work.
Basically, I want to have 1 label set to the top left and the content in the bottom middle of the cell.
The 950px width is for printing purposes.
Here is a jsfiddle link to exemplify my problem.
http://jsfiddle.net/o1L31qwu/
Thanks in advance.
change your CSS like this:
.tableClass {
width: 950px;
table-layout: auto;
margin-top: 8px;
border-color: black;
border-width: 0 0 1px 1px;
border-style: solid;
border-spacing: 0;
border-collapse: collapse;
}
.tableClass td{
border-color: black;
border-width: 1px 1px 0 0;
border-style: solid;
margin: 0;
padding: 4px 0;
position:relative;
vertical-align:top;
}
.label{position:relative; margin:4px; margin-bottom:30px /* adjust to bottom size */; }
.content{width:100%; position:absolute; bottom:1px; left:0; background:#fc0; margin:0; text-align:center;}
I have added a background color for visualization purposes, but of course you'll need to edit at will . See fiddle here
Here's a flexbox solution that will handle arbitrarily-sized .label and .content: http://jsfiddle.net/5kzzgkgr/.
The content of the cell should be placed in a wrapper div:
<td>
<div>
<div class="label">This Label is large / and divided [eph] really large label.And some more text, text, text, and more text.....<br /><br /></div>
<div class="content">BOTTOM</div>
</div>
</td>
CSS:
.tableClass td{
height: 0px;
}
.tableClass div:only-of-type {
height: 100%;
background-color: #ccc;
display: flex;
flex-flow: column wrap;
justify-content: space-between;
}
Right now, I have the side, and top and bottom padding set, but while that is the same for each cell, when there is more text in the one cell, the height at which the text starts is different based on how much text there is. What should I be doing so that the text starts at the same distance from the top of the cell regardless of the amount of text, and then pushes down from there? So that I end up with something like this:
as opposed to something like this:
Current code:
.bottom-table td {
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 50px;
}
Also have some code that styles the table as a whole (don't think it would be relevant, but here it is):
.bottom-table {
-moz-border-radius: 15px !important;
border-radius: 15px !important;
border: 2px solid black !important;
width: 75%;
text-align: center;
margin-right: auto;
margin-left: auto;
}
Here is a JSFiddle with the relevant code: http://jsfiddle.net/zLyNm/
Add vertical-align: top to .bottom-table td.
.bottom-table td {
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 50px;
vertical-align: top;
}
jsfiddle
you can use witdth property or can use margin or you can use colspan and rowspan property..
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.