I have an HTML table. I need to have spacing between the table columns, but not the table rows.
My table columns also have border around them:
<table>
<tr>
<td style="padding:0 15px 0 15px;">hello</td>
<td style="padding:0 15px 0 15px;">world</td>
<td style="padding:0 15px 0 15px;">how</td>
<td style="padding:0 15px 0 15px;">are</td>
<td style="padding:0 15px 0 15px;">you?</td>
</tr>
<tr>
<td style="padding:0 15px 0 15px;">hello</td>
<td style="padding:0 15px 0 15px;">world</td>
<td style="padding:0 15px 0 15px;">how</td>
<td style="padding:0 15px 0 15px;">are</td>
<td style="padding:0 15px 0 15px;">you?</td>
</tr>
</table>
Css
table td{
border : 1px solid black;
border-spacing: 1em 0;
}
fiddle
If I use the cellspacing css property it does it between both rows and columns.
There is no cellspacing CSS property.
The property is called border-spacing and …
The lengths specify the distance that separates adjoining cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. Lengths may not be negative.
… takes two values.
So:
border-spacing: 1em 0;
table {
border-collapse: separate;
border-spacing: 1em 0;
}
https://www.w3schools.com/cssref/pr_border-spacing.asp
Set display to inline-table and create right margin for each td:
table tr td{
border:1px solid black;
display:inline-table;
margin-right:10px;
}
You can remove the margin from last child this way:
table tr td:last-child {
margin-right:0;
}
Related
I want to remove horizontal lines from my HTML table
I have tried using CSS like border-bottom and border-top and set the value to 0 but that didn't change; whereas border-right and border-left working perfectly.
tr {
border-bottom: 0;
/* border-bottom:none; */
}
<table style="border:1px solid black;">
<tr>
<td style="padding:0px 15px 0px 65px;"><strong>Type</strong></td>
<td style="padding:0px 15px 0px 20px; "><strong>Quantitiy</strong></td>
<td style="padding:0px 15px 0px 0px;"><strong>price</strong></td>
<td style="padding:0px 15px 0px 0px;"><strong>total price</strong></td>
</tr>
<tr class="type">
<td style="padding:5px 15px 0px 65px;">{{type}}</td>
<td style="padding:5px 15px 0px 20px;">{{meters}}</td>
<td style="padding:5px 15px 0px 0px;">{{price}}</td>
<td style="padding:5px 15px 0px opx;">{{price_total}}</td>
</tr>
</table>
I want to remove those horizontal lines using CSS like border-bottom but failed.
i have just added psuedo code
this is how actually my table looks like
i want to remove those horiazontal line from cloth,shirt,pants straight away to the bottom for all the columns as well
table, th, td {
border-collapse: collapse;
}
td{
border:1px solid black;
border-top: none;
border-bottom: none;
}
This should do the work
Try to add style to td element. Not to tr.
I’m trying to get some padding around data in my table row, whose HTML is the following …
<tr class="even subscription-row header">
<td class="ig-header-title ellipsis">
<img src="/assets/s-icon-0d60471f901d65172728d3df0e793b2ee4493a529c1a1dca73409fdae56ad362.png" alt="S icon">
<a class="name ellipsis" target="_blank" href="/scenarios/18">My Scenario</a>
</td>
<td align="center"><img src="/assets/zip_icon-c2a0694959db12a0939d264d4283478c1f59a4b118df839d7020aca929a1df61.png" alt="Zip icon"></td>
</tr>
I applied this style …
.subscription-row {
min-height: 30px;
border-top-width: 0;
border-radius: 0;
border-bottom: 1px solid #C7CDD1;
padding: 12px 6px 12px 10px;
box-sizing: border-box;
}
.subscription-row img, .subscription-row .name {
vertical-align: middle;
}
.subscription-row .name {
color: #3d454c;
font-size: 15px;
font-size: .9375rem;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
font-weight: bold;
}
but there is still not any padding in around the data in my table row. Here is the Fiddle illustrating this — https://jsfiddle.net/77zhfe27/ . How can I get the padding to appear?
You need to apply the padding to the td element.
<style>
td {
padding: 12px 6px 12px 10px;
}
</style>
padding doesn't work on rows.
A often used work-around is to set padding to the cells td, though one get a similar effect using border-spacing on the table.
The down side though, with both, is that you get the space in between the cells as well, so as a work-around, if one really need it on the row, is to either nest a table in a table, or as in below sample, use the row's border to create a padding effect
Note, that the table need border-collpase: collapse for styles to apply on a tr
table {
border-collapse: collapse;
}
table tbody tr:hover {
background-color: cyan
}
.subscription-row {
min-height: 30px;
border-color: transparent;
border-style: solid;
border-width: 12px 6px 12px 10px
}
.subscription-row td {
border-bottom: 1px solid #C7CDD1;
}
.subscription-row img,
.subscription-row .name {
vertical-align: middle;
}
.subscription-row .name {
color: #3d454c;
font-size: 15px;
font-size: .9375rem;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
font-weight: bold;
}
<table id="subscriptions-table">
<thead>
<tr>
<th>Subscription</th>
<th>Download</th>
</tr>
</thead>
<tbody>
<tr class="even subscription-row header">
<td class="ig-header-title ellipsis">
<img src="/assets/s-icon-0d60471f901d65172728d3df0e793b2ee4493a529c1a1dca73409fdae56ad362.png" alt="S icon">
<a class="name ellipsis" target="_blank" href="/scenarios/18">My Scenario</a>
</td>
<td align="center">
<a href="/scenarios/18/download">
<img src="/assets/zip_icon-c2a0694959db12a0939d264d4283478c1f59a4b118df839d7020aca929a1df61.png" alt="Zip icon">
</a>
</td>
</tr>
</tbody>
</table>
I modified your Fiddle and it appears to work: https://jsfiddle.net/77zhfe27/3/
Key code change is here. Showing emphasis with the large padding (20px).
table#subscriptions-table tr td{
padding:20px;
}
This lets you choose the table with your ID and drill down to what is essentially the row (tr) and cell (td). You could be more global and effect all tables like this:
table tr td{
padding:20px;
}
Then override as needed with individual table classes or ids.
Also: Bob (another post here) gave a better example of setting padding for each side (top right bottom left) with his use of padding:6px 12px 6px 12px; That works too, otherwise setting one value will set that for ALL sides. Doing something like padding:6px 12px; will set top/bottom to 6px and right/left to 12px.
Hope it helps!
I have a table wherein I need to put a border around a given row or rows with spacing between them.
I seem to be able to do one or the other.
I know I can use
table { border-collapse: separate; border-spacing: 1em 0.5em; }
To get my spacing, but then the border won't show up with something like
tr.bordered { border: 1px solid blue; }
If I set border-collapse: collapse, the blue border shows. But then no spacing.
Am I missing something here?
EDIT: JS FIDDLE here
You can see, if you use "collapse", the border works but there is no space.
If you use "separate" you get spacing but no border.
Duplicate question here: Style row or column rather than cells when border-collapse: separate
The recommendation is to use colspan to simulate a table row, and add a border to the table inside of the colspan.
I guess what you want is to put spaces between the borders of the cell and its data? If so, you can use the property padding in td. ex:
td {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top: 10px;
}
You can have an inner table which is bordered:
<table>
<tr><td colspan="3">
<table class="bordered">
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
</table>
</td></tr>
<tr>
<td>lorem</td>
<td>ipsum</td>
<td>dolor</td>
</tr>
</table>
Demo: http://jsfiddle.net/2nMcg/7/
If you want spacing between the table rows and add a border style to each row you can achieve this by setting only top and bottom border-spacing otherwise you cannot have a continuous line for each table row. And you need to set the border style on the td. Since border-collapse: collapse prevents to style the border on the TR element but you need it to set the top and bottom spacing between rows.
http://jsfiddle.net/6rLsL/1/
http://jsfiddle.net/6rLsL/1/show
table {
border-collapse: separate;
border-spacing: 0 0.5em;
}
td {
padding: 0.5em;
border-top: 1px solid #000;
}
you can try to draw an unblured shadow : DEMO
.bordered {
box-shadow:0 0 0 1px black;
}
:( this works in FF , but ...
so ,
we can use :first-child and :last-child to draw borders from tds,
DEMO 2
.bordered td {
border: 1px solid #000;
border-left:none;
border:right:none;
padding:1em 0.5em;
border-right:none;
}
.bordered td:first-child {
border-left:1px solid #000
}
.bordered td:last-child {
border-right:1px solid #000;
border-left:none;
}
table {
border-spacing: 0;
}
I'm working on a mobile site targeting older phones that have limited CSS \ html support and so I'm reverting to tables.
What I'm trying to achieve on a particular page is to have a table row with a heading of a particular value and then another row in the same table with the value and a link to edit
The problem is that the heading spans only one column and I would like to be able to style it so that there is some padding and margins as well as a border.
Can someone provide some advice on how to do this?
HTML
<div class="navalt">
<table style="width:100%;">
<tbody>
<tr class="edHeading">
<td><fmt:message key="editprofile.location"/></fmt:message></td>
</tr>
<tr>
<td class="leftTd">USA</td>
<td class="rightTd">Edit</td>
</tr>
CSS
.navalt {
text-align:center;
padding: 4px 0px 4px 4px;
border-top: thin solid #C5C9D1;
border- bottom: thin solid #C5C9D1;
}
.edHeading {
padding: 4px 0px 4px 4px;
background-color:#E9E1FF;
}
.leftTd {
border-right: thin solid #C5C9D1;
padding: 0px 0px 0px 5px;
text-align:left;
width:50%;
}
.rightTd {
padding: 0px 5px 0px 0px;
text-align:right;
width:50%;
}
As Wabs said, you could just add a colspan to your td in the heading.
Another way, which will allow you to separate your styling more, is to use the thead tag - seeing as you have used <tbody> this would make more sense.
Also - as a side note, you have no closing tags for your div and body and table - though i assume this is because you only copied part of your code..?
Here is a fiddle: http://jsfiddle.net/f6NKt/2/
the code is as:
HTML
<table style="width:100%;">
<thead>
<tr>
<th colspan="2">Heading - location use th tags</th>
</tr>
</thead>
<tbody>
<tr>
<td class="leftTd">USA</td>
<td class="rightTd">Edit</td>
</tr>
</tbody>
</table>
and CSS - notice use of thead instead
.navalt {text-align:center;padding: 4px 0px 4px 4px;border-top: thin solid #C5C9D1;border- bottom: thin solid #C5C9D1;}
thead {padding: 4px 0px 4px 4px;background-color:#E9E1FF;}
thead th {font-size:20px;}
.leftTd {border-right: thin solid #C5C9D1;padding: 0px 0px 0px 5px;text-align:left;width:50%;}
.rightTd {padding: 0px 5px 0px 0px;text-align:right;width:50%;}
Unless I'm missing something, could you not add colspan=2 to the header <td> so it spans your entire table?
<tr class="edHeading"><td colspan="2"><fmt:message key="editprofile.location"/></td></tr>
I have a very simple table:
<table border="1" class="my-table">
<tr class="head">
<th>head-1</th>
<th>head-2</th>
<th>head-3</th>
<th>head-4</th>
<th>head-5</th>
</tr>
<tr>
<div class="row-data">
<td>data-1</td>
<td>data-2</td>
<td>data-3</td>
<td>data-4</td>
<td>data-5</td>
</div>
</tr>
</table>
As you saw above, the second row <tr> contains a <div> which then contains <td>s , the reason why I did this is that I want to have a row background which has border-radius css feature for each row instead of for each column(<td>)
(I konw if I put <div> inside <td>, the following css will take effect, but that's not what I want see here , it is a column based border-radius background, however I need a row based one.)
my css:
.row-data{
background-color:#ececec;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
But it does not work in this way to have a row<tr> based border-radius css feature, how to get rid of it?
You can run my code on jsfiddle here
Instead of making a new div for it just add the class to the row: <tr class="row-data">
check this may be that you want http://jsfiddle.net/sandeep/EWPVc/24/
td{
background-color:red;
}
td:first-child{
border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
}
td:last-child{
border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-moz-border-radius:0 10px 10px 0;
}
border-radius can apply on table, but not the row.
Check out this demo of border-radius for table: http://vamin.net/examples/rounded_tables.html