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.
Related
This question already has answers here:
Giving a border to an HTML table row, <tr>
(10 answers)
Closed 2 years ago.
Any thoughts as to why this isn't working?
<tr style="border-style: solid; border-width: 0px 0px 3px 0px; border-color: #97298f;">
Thanks!
EDIT:
This is more detail from this section, applying to cells since it wasn't working for the row, using the suggestions below – but it's still not working:
<tr>
<td style="border: 0px 0px 3px 0px solid #97298f" width="75%" colspan="3"><p><i><span style="font-size:42pt;font-family:"Fira Sans Medium",sans-serif; color:#7030A0">Joining Together</span></i></p></td>
<td style="border: 0px 0px 3px 0px solid #97298f" width="25%"><p align="right" style="text-align:right"><span style="font-family:"Fira Sans Light",sans-serif;"><img width=112 height=62 src="https://drive.google.com/uc?export=view&id=1ZVLVDqtRqX691OXo7dN2n1Pb2V1D42Lq&authuser=camfont%40gmail.com&usp=drive_fs"
alt="Unity Logo" v:shapes="Picture_x0020_4"></span></p></td>
</tr>
The properties of the border attribute are in the following order:
border-width, border-style and then the color.
Take a look at this example
<tr style="border: 1px solid red;">
You can open this site to know more abbout styling tables.
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;
}
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'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>
My pen: http://codepen.io/helloworld/pen/gimoI
I want to have a gray and white border on a table row to achieve a 3d effect.
Why is only one border color visible?
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<table style="width:100%;">
<tr>
<td style="vertical-align:top;width:60px;">Alarm 1</td>
<td style="width:auto;">
<span style="font-weight:bold;">Brand LANG: </span>
<span>Helmenstraße 5</span>
<span>90000 Nürnbergxxxxxxxxx</span>
</td>
<td style="width:30px;text-align:center;"> <i class="icon-angle-down button"></i></td>
</tr>
<tr>
<td style="width:60px;vertical-align:top;">
<div style="border-radius:28px;border:black solid 1px;background:red;">Alarm 1</div>
</td>
<td style="width:auto;">
<span style="font-weight:bold;">Brand LANG: </span>
<span>Langenburgerwald allee 25/c</span>
<span>70000 Wurmlingen ob der Tauber</span>
</td>
<td style="width:30px;text-align:center;"> <i class="icon-angle-down button"></i></td>
</tr>
</table>
body,html{
padding:0;
margin:10px;
background:#fafafa;
}
table{
border-collapse:collapse;
border-spacing:0;
}
table td
{
padding: 5px;
}
td {
border-bottom: gray solid 2px;
border-top: white solid 2px;
background:green;
}
Because the top border is white and is difficult to see the diference with the background.
I just updated it now:
body,html{
padding:0;
margin:10px;
background:#fcc;
}
table{
border-spacing:0px;
}
table td
{
padding: 5px;
border-bottom: gray solid 2px;
border-top: white solid 2px;
}
tr {
background:green;
}
You have to remove border-collapse:collapse;
Check this [http://codepen.io/anon/pen/vIHcf][1]
You need to work with box shadows . I just also described it in my one of the answer of same type of questio Link to that Answer or you can go through to this link to learn more about box-shadowsStudy box shadow
you can add
-webkit-box-shadow:10px 10px 5px #595959; -moz-box-shadow:10px 10px 5px #595959; -o-box-shadow:10px 10px 5px #595959;
in your td style & then find that is it same as you want ..
Both are visible on my side.
Little alternative or addition to achive 3d effects:
You can use CSS Outline. Its like a second border.
http://www.w3schools.com/css/css_outline.asp
I see the blank and grey border. But if you want to put some 3d effect on the rows why don't use box-shadow?
box-shadow: inset 1px 1px 3px #000;
Here I made an example with your code.