I have a fairly simple table with two rows, each of which has one cell. The table has a colored border. The top row/cell has a white background. The bottom row/cell has a colored background. The problem is that the bottom row/cell has a thin, white border that I do not want there. Can anyone suggest a code modification to get rid of that border? My code is below, and here is a screenshot with the purple arrows pointing to the border that I am trying to eliminate. Thanks for any suggestions.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.table1 {
border: 4px solid #FF7C7C;
float: initial;
}
.td1 {
width: 530px;
padding: 5px 35px 5px 35px;
font-family: verdana, geneva, sans-serif;
font-size: 16px;
line-height: 22px;
color: #62605d;
text-align: left;
vertical-align: top;
}
</style>
</head>
<body>
<table class="table1">
<tr class="td1">
<td class="td1" style="text-align: center;">
Text line 1.<br />
Text line 2.<br />
Text line 3.
</td>
</tr>
<tr style="border-style: none;">
<td class="td1" style="border: none; border-spacing: 0px; background-color: #FF7C7C; color: #ffffff; font-size: 11px; text-align: center;">
Text line 1.<br />
Text line 2.<br />
Text line 3.
</td>
</tr>
</table>
</body>
</html>
UPDATE: Thank you to #Alohci, #lv_ and #PleaseDontHurtMe.jpeg for those quick responses. Interestingly, the border-spacing tag for table fixed the problem when previewed on w3schools, but when I made the change in Visual Studio the border remained. I had to add the border-collapse tag to fix it for Visual Studio. Ah, the mysteries of HTML...
Try border-collapse: collapse; in your .table1
Table has default border-spacing
.table1 {
border-spacing: 0;
}
Related
I'm trying to create a table containing a list of products. I want each row to only have one cell, with the name of a product left-aligned on it. But I also want to add an edit option(a hyperlink called 'Edit'), right-aligned on the same line, in the same table cell. Since <td> elements are left-aligned by default, I added a class attribute to Edit's <a> tags and used that to style it, but it's still left-aligned. Any idea how to solve this?
This is the CSS code for the edit option's class:
.editLink{
text-align: right;
text-decoration: none;
color: #555555;
font-size: smaller;
padding-right: 10px;
}
You can use float on the edit link.
table {
border-collapse: collapse;
}
table td {
border: 1px solid #000;
width: 150px;
}
.editLink {
float: right;
text-decoration: none;
color: #555555;
font-size: smaller;
padding-right: 10px;
}
.editLink::after {
clear: both;
content: "";
display: table;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<table>
<tr>
<td>Lorem Edit</td>
</tr>
<tr>
<td>Lorem Edit</td>
</tr>
<tr>
<td>Lorem Edit</td>
</tr>
</table>
</body>
</html>
I'm using Powershell ConvertTo-HTML to build a three column table. I want to display a header image in the first row that spans all three columns. The table looks great but the image in the first row is like 1px thick.
I've tried resizing the columns, the image, only using 1 column instead of spanning...
Here's the generate code from the Powershell script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
table {
border-collapse: collapse;
width: 700px;
}
td, th {
border: 1px solid #ddd;
font-family: Arial;
font-size: 14px;
padding: 8px;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4286f4;
color: white;
}
</style>
</head><body>
<table>
<tr>
<td colspan='3' >
<img src='file:///\\fileserver\files\file1.jpg'/>
</td>
</tr>
<tr>
<td style='width:10%'></td>
<td>Test</td>
<td style='width:10%'></td>
</tr>
</table>
<table>
</table>
</body></html>
Thanks for any help.
Jeff
I finally figured it out. The image was around 2,500px and way to large so was getting compressed into the space.
Thanks everyone for you suggestions.
I have an HTML table with lots of cells in it. Some of these cells should be flagged as warning, others as alert.
I have come up with the following HTML/CSS to do something like this.
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
float: right;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30>hello
<div class='circle'>I</div>
</td>
</tr>
</table>
</body>
</html>
Which displays the text like...
However, I want it to display with the little flag immediately to the right of the text, like this...
If I change the CSS to specify float: left; this then displays the flag before the text.
The reason I want it aligned to the right of the text, is that depending on the width of the column, it might not be obvious which text is being flagged.
ps. I've included the td width/height just so that I can demonstrate what I'm trying to do, there's also no table borders in my final design.
You can avoid making your circle narrow by using display:inline-block; and remove the float all together.
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
display: inline-block;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30>hello
<div class='circle'>I</div>
</td>
</tr>
</table>
</body>
</html>
The primary difference between a <div> and a <span> is how they affect the layout.
A <div>, by default, is a block element and wants to live on its own line.
A <span>, by default, is a inline element and will sit next to the element before and after it.
Changing to a <span> and getting rid of the float will solve the problem. Though you do need to set its display value to something like inline-block to allow the width and height values to work correctly.
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30>hello
<span class='circle'>I</span>
</td>
</tr>
</table>
</body>
</html>
Please make Couple of adjustments to your code:
Change:
hello
To:
<div style="float:left;">hello</div>
And In CSS
Change:
float:right;
To
float: left;
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
float: left;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30><div style="float:left;">hello</div>
<div class='circle'>I</div>
</td>
</tr>
</table>
</body>
</html>
Hy, i have a little problem, i've set
border: none;
border-width: 0px;
border-spacing: 0px;
border-collapse: collapse;
padding: 0px;
margin: 0px;
for table, td and tr, but the 1px border still exists between tr nodes.
Html code:
<table>
<tr>
<td>
<a href='url'> some text </a>
</td>
<td>
<a href='url'> some text </a>
</td>
</tr>
</table>
for i've set
display: block;
color: white;
font-size: 13px;
text-decoration: none;
height: 24px;
padding: 9px 19px 1px;
font-weight: 600;
text-align: center;
changing padding to 0, don't give any results.
Any solutions?
Browser: last chrome, firefox.
OS MAC OS 10.8
You need to put border-collapse: collapse; in the table styling and border-spacing: 0px; padding: 0px; in the cell. See example code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table {border-collapse: collapse;}
table tr {}
table td {border-spacing: 0px; padding: 0px;}
</style>
</head>
<body>
<table>
<tr>
<td>
<a href='url'> some text </a>
</td>
<td>
<a href='url'> some text </a>
</td>
</tr>
</table>
</body>
</html>
Try using:
border-style: none;
Note that this doesn't work in some versions of IE. IE9 is fine but in previous versions it displays the border even when the style is "none"
border: 0;
seems to work in all browsers...
i think your code was right?
Is this what you wanna see?
setting
border-collapse:collapse;
border:none;
is enough..
How do I get the IE gradient function here in this code sample to completely fill the table cell? With the code given below, I could only get it to cover the upper half of the cell. alt text http://img708.imageshack.us/img708/6602/celltext.png
<HTML>
<HEAD>
<style>
<!--table
.cl1
{
font-family:Comic Sans MS;
font-size:11.0pt;
color:#800000;
border-left:1.5pt solid #000000;
border-top:1.5pt solid #000000;
border-right:1.5pt solid #000000;
border-bottom:1.5pt solid #000000;
background-color:#ffffff;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#ffffff', EndColorStr='#99cc00')
progid:DXImageTransform.Microsoft.dropshadow(Color='#660000', Positive='true', OffX=0, OffY=0);
}
-->
</style></HEAD>
<BODY>
<table x:str cellspacing=0 style='table-layout:fixed; border-left:1.0pt solid; border-top:1.0pt solid; border-right:1.0pt solid; border-bottom:1.0pt solid; border-left-color:#c0c0c0; border-top-color:#c0c0c0; border-right-color:#c0c0c0; border-bottom-color:#c0c0c0; '>
<col style='width:67pt;'>
<tr style='height:28.00pt'>
<td class=cl1 style='width:67pt;'>Cell Text</td>
</tr>
</BODY>
</HTML>
I added the line:
line-height: 220%;
To your .cl1 style, and it filled completely. Obviously this is not a final fix, but it definitely points to the line-height property as having something to do with it.