This is the code snippet. I want to implement 0 spacing between the nth and n-1th element, I tried using left and right as zero between the adjacent child but that doesn't work as well.
table {
border-spacing: 10px 5px;
}
th {
text-align: left;
}
td,
th {
padding: 0 5px;
height: 20px;
font-size: 12px;
background-color: #000;
color: #fff;
border-top-left-radius: 10px;
}
td:nth-child(3)
{
left:0;
}
td:nth-child(2)
{
right:0;
}
<table>
<tr>
<th>Exams</th>
<th>Science</th>
<th>Mathematics</th>
<th>Biology</th>
</tr>
<tr>
<td>2000</td>
<td>95</td>
<td>64</td>
<td>33</td>
</tr>
</table>
What I want is to reduce the gap between the second and third element of td to be zero, that's it.
I want zero gap between 95 and 64.
Related
How can let the rows at the top (not at the bottom) with fixed tbody height of 500px!
html,body{
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1rem;
}
main{
margin: 10px;
padding: 10px;
}
table{
border-collapse: collapse;
border: 1px solid;
width: 100%;
}
tr,th,td{
border: 1px solid;
padding: 3px;
text-align: center;
}
.minHeight{
height: 500px;
}
<table>
<thead>
<tr>
<th>Code Article</th>
<th>Code TVA</th>
<th>Remise</th>
</tr>
</thead>
<tbody class="minHeight">
<tr>
<td>100</td>
<td>10</td>
<td>2</td>
</tr>
</tbody>
</table>
I would clarify it as I get output like this:
But I want it to be like this:
Remove text-align:center on the td and add vertical-align:top
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1rem;
}
main {
margin: 10px;
padding: 10px;
}
table {
border-collapse: collapse;
border: 1px solid;
width: 100%;
}
tr {
border: 1px solid;
padding: 3px;
}
th,
td {
border: 1px solid;
padding: 3px;
vertical-align: top;
}
.minHeight {
height: 500px;
}
<table>
<thead>
<tr>
<th>Code Article</th>
<th>Code TVA</th>
<th>Remise</th>
</tr>
</thead>
<tbody class="minHeight">
<tr>
<td>100</td>
<td>10</td>
<td>2</td>
</tr>
</tbody>
</table>
You are not very descriptive on what you want but I'll give it a try.
I think you mean that you want the numbers on top of the list under the name and not in the center of it's entire box.
If so, then one simple solution is to add padding to the bottom of your first row of data (td). The padding should be equal to the height of your liking (warning: if you add more data you will need to adjust the padding).
My border radius does not show if I have the property of border-collapse on the table tag. I need the border-radius property on and if I remove the border-collapse property I don't get the look I want which is the grey sections to go to the very edge of the table.
What is the solution to this and whats the cause of it?
Thanks in advance
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
table {
/*if i comment out the border-collapse property it then shows my radius*/
border-collapse: collapse;
margin: 25px 0;
width: 50%;
border-radius: 5px;
font-size: 1.4rem;
min-width: 400px;
border: 1px solid #c3c3c3;
/*margin is just for demo*/
margin: 20px 20px;
}
table tr {
border-bottom: solid 1px #d1d1d1;
}
table tr:nth-child(odd) {
background-color: #eee;
}
table td {
padding: 10px 15px;
}
table td:first-of-type {
font-weight: 600;
}
<table>
<tbody>
<tr>
<td>Application</td>
<td>Natural gas & LPG</td>
</tr>
<tr>
<td>Standards</td>
<td>BS EN ISO 9001:2008 - EN 331:1998</td>
</tr>
<tr>
<td>Connection</td>
<td>BSP Taper F</td>
</tr>
<tr>
<td>Finish</td>
<td>Plated</td>
</tr>
</tbody>
</table>
very
If your intention is to not see any spacing between the content background and the border, then simply remove the border-collapse and add border-spacing: 0. border-spacing: 0 will not affect the border radius at all and it will also give you the results of no space between the border and the inner content.
In searching it seems there are some anomalies with using collapse and radius together. There are also some work arounds where you use psuedo tags on the tables children specifically to get a radius to work, but why waste all that time when you can just remove the space between the border and its inner content using border-spacing which works well with border-radius
EDIT: By using psuedo selectors along with border-space: 0 you can achieve a more pronounced border radius.
We want to target each td element that borders the edge of the table element.
table tr td:first-of-type and table tr td:last of type to get the left and right sides. Then we target each subsequent first and last child to get the corners. Lastly, if this is a dynamic table and you will have more than two data tables located in the table, add td:not(:first-child):not(:last-child) on each first and last of type.
I don't get the look I want which is the grey sections to go to the very edge of the table.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
table {
/*add border-spacing: 0 instead of border-collapse: collapse*/
border-spacing: 0;
margin: 25px 0;
width: 50%;
font-size: 1.4rem;
min-width: 400px;
/*margin is just for demo*/
margin: 20px 20px;
}
/* Start psuedo child tags here, targeting each data elements relevant corners and sides */
table tr td:first-of-type {
border-left: 1px solid #c3c3c3;
}
table tr td:last-of-type {
border-right: 1px solid #c3c3c3;
}
/* :not(:first-child):not(:last-child)
This will get any potential data tables that are added
that are not sides or corners however, they are border
data tables on top or bottom */
table tr:first-of-type td:not(:first-child):not(:last-child){
border-top: 1px solid #c3c3c3;
}
table tr:last-of-type td:not(:first-child):not(:last-child){
border-bottom: 1px solid #c3c3c3;
}
table tr:first-of-type td:first-child {
border-top: 1px solid #c3c3c3;
border-top-left-radius: 5px;
}
table tr:first-of-type td:last-child {
border-top: 1px solid #c3c3c3;
border-top-right-radius: 5px;
}
table tr:last-of-type td:last-child {
border-right: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
border-bottom-right-radius: 5px;
}
table tr:last-of-type td:first-child {
border-left: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
border-bottom-left-radius: 5px;
}
/* End Psuedo tags here */
table tr {
border-bottom: solid 1px #d1d1d1;
}
table tr:nth-child(odd) {
background-color: #eee;
}
table td {
padding: 10px 15px;
}
table td:first-of-type {
font-weight: 600;
}
<div id="table">
<table>
<tbody>
<tr>
<td>Application</td>
<td>here is some data</td>
<td>Natural gas & LPG</td>
</tr>
<tr>
<td>Standards</td>
<td>some data in between</td>
<td>BS EN ISO 9001:2008 - EN 331:1998</td>
</tr>
<tr>
<td>Connection</td>
<td>some data in between</td>
<td>BSP Taper F</td>
</tr>
<tr>
<td>more tables</td>
<td>some data in between</td>
<td>more data</td>
</tr>
<tr>
<td>some more data still</td>
<td>some data in between</td>
<td>and yet more about this data</td>
</tr>
<tr>
<td>Finish</td>
<td>Plated</td>
<td>Plated too</td>
</tr>
</tbody>
</table>
</div>
I would like a table such that I have multiple rows, but no inner-vertical lines. That implies a complete border around the table, but no inner-column borders. Specifically, I would want the ability to have that, but with spacing around each row and curved edges, as shown in this example code: https://jsfiddle.net/n14ye7nk/
body {
font-family: sans-serif;
}
#table {
border-spacing: 0.3em;
}
#table td {
border: 2px solid #30c;
border-radius: 0.4em;
padding: 1em;
text-align: center;
}
Unfortunately tables aren't really designed to do what you are asking.
In order to have the border around the row rather than the cell, simply shift the border rule to the #table tr selector, and also add border-collapse: collapse to the <table> element itself.
body {
font-family: sans-serif;
}
#table {
border-collapse: collapse;
border-spacing: 0.3em;
}
#table tr {
border: 2px solid blue;
}
#table td {
padding: 1em;
text-align: center;
}
<table id="table">
<tbody>
<tr>
<td>this</td>
<td>is</td>
<td>a table</td>
</tr>
<tr>
<td>with</td>
<td>rounded</td>
<td>cells</td>
</tr>
</tbody>
</table>
Table row spacing can be done with border-collapse: separate... though this doesn't allow for the border.
Note that neither approach will allow border-radius to be applied to tr. The best way of doing this is to simply set individual corner radii on the <td> element :first-child and :last-child. Note that you'll want cellspacing="0" on the <table> itself.
body {
font-family: sans-serif;
}
#table td {
padding: 1em;
text-align: center;
}
#table tr:first-of-type td {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
#table tr:last-of-type td {
border-bottom: 2px solid blue;
}
#table tr:first-child td:first-child {
border-left: 2px solid blue;
border-top-left-radius: 10px;
}
#table tr:first-child td:last-child {
border-right: 2px solid blue;
border-top-right-radius: 10px;
}
#table tr:last-child td:first-child {
border-left: 2px solid blue;
border-bottom-left-radius: 10px;
}
#table tr:last-child td:last-child {
border-right: 2px solid blue;
border-bottom-right-radius: 10px;
}
<table id="table" cellspacing="0">
<tbody>
<tr>
<td>this</td>
<td>is</td>
<td>a table</td>
</tr>
<tr>
<td>with</td>
<td>rounded</td>
<td>cells</td>
</tr>
</tbody>
</table>
Again, this is not ideal.
The best way of handling this really is by completing replacing the table with <div> elements instead. This way you can make use of calc() in the width to ensure even spacing, float: left to control how many elements are in a row, and margin-bottom to add whitespace in between the rows. You also only have to apply the core border-radius on the .row itself:
.row {
font-family: sans-serif;
border: 2px solid blue;
border-radius: 10px;
}
.row div {
display: inline-block;
text-align: center;
padding: 1em;
width: calc(100% / 3 - (3px + 2em));
}
.row:first-of-type {
margin-bottom: 20px;
}
<div class="row">
<div>this</div>
<div>is</div>
<div>a table</div>
</div>
<div class="row">
<div>with</div>
<div>rounded</div>
<div>cells</div>
</div>
I have a little problem. I want to get space between table rows and that rows had rounded corners. I can get space with border-collapse, but then I won't be able to get rows with rounded corners.
I have tried border-radius but it just won't work.
Is there any way to get these both things to work?
th {
background-color: black;
color: dimgray;
}
td {
padding-bottom: 10px;
color: whitesmoke;
font-weight: bold;
}
/*
table {
border-collapse: separate;
border-spacing: 0 1em;
}
*/
tr {
border-radius: 10px;
}
Rows should look like that:
I suggest you to do that kind of thing:
table {
border-collapse: separate;
border-spacing: 0 10px;
text-align: center;
}
table td {
background: #ccc;
width: 160px;
height: 30px;
}
table td:first-of-type{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
table td:last-of-type{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
It works for any number of td cells per tr.
Hope it helps.
You'll need to apply the border-radius style to the td elements, border-radius doesn't work on tr elements.
If your rows are made up of multiple cells, you can use td:first-child and td:last-child to style the first and last cells with a border-radius and leave the rest without rounded borders.
You can set whatever you want to style it.... (like width,height,background-color ...)
table{
border-collapse: separate;
border-spacing: 10px 20px;
}
table td,table th {
border: 1px solid black;
width:100px;
height:50px;
border-radius:10px;
}
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
Here, there are no gaps between columns/cells in both table header and table body. I need space between column in table head but there should be no gaps between columns in table body.
How to include space between columns in thead alone. i.e border space?
Below is the code I have tried.
jsfiddle
table.OrderDetail {
font-family: Arial;
border-collapse: collapse;
}
.OrderDetail tbody {
padding: 10px;
text-align: left;
font-size:13px;
font-family: Arial;
}
.OrderDetail thead {
padding: 7px;
text-align: left;
background-color: #E0E0E0;
color:#989898;
font-size:10px;
}
.OrderNumber {
font-family: Helvetica, Arial, sans-serif;
background-color: #99CCFF;
text-align: left;
}
.OrderNumber thead {
font-size:10px;
}
.OrderNumber tbody {
font-size:15px;
}
tr.separating_line td {
border-bottom: 1px solid gray; /* set border style for separated rows */
}
.OrderDetail td {
padding: 10px 0; /* 10px top & bottom padding, 0px left & right */
}
.OrderDetail th {
padding: 5px 0; /* 10px top & bottom padding, 0px left & right */
}
<table class="OrderNumber" style="width:100%">
<thead>
<tr></tr>
<tr>
<td>Order Number</td>
</tr>
</thead>
<tbody>
<tr>
<td>234456667</td>
</tr>
<tr></tr>
</tbody>
</table>
<br></br>
<table class="OrderDetail" style="width:100%">
<thead>
<tr>
<th>Line Item Number</th>
<th>Item Description</th>
<th>Ship To Location</th>
<th>Carrier</th>
<th>Tracking Number</th>
</tr>
</thead>
<tbody>
<tr class="separating_line">
<td>1</td>
<td>$itemDescription</td>
<td>$shipToLocation</td>
<td>$carrier</td>
<td style="color:#33CCFF">$trackingNumber</td>
</tr>
<tr class="separating_line">
<td>1</td>
<td>$itemDescription</td>
<td>$shipToLocation</td>
<td>$carrier</td>
<td style="color:#33CCFF">$trackingNumber</td>
</tr>
</tbody>
</table>
I have used border-collapse: collapse at table. This makes all border continuos. I need it be continuos at body and not continuos at head level of table. is it even possible?
Perhaps this will help you? Set the border width for the th cells. It makes a separation between the headings, I think that's what you ask for...?
.OrderDetail th {
padding: 5px 0; /* 10px top & bottom padding, 0px left & right */
border-right: 5px solid white;
}
.OrderDetail th:last-child {
border-right: 0;
}
jsfiddle
This could be what you're after. You need to target the cells directly.
.OrderDetail thead th { padding: 7px; }
.OrderDetail tbody td { padding: 3px; }