How to completely remove borders from HTML table
<table cellspacing="0" cellpadding="0">
And in css:
table {border: none;}
EDIT:
As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl's border-collapse solution.
I actually quite dislike this change so far (don't work with tables that often). It makes some tasks bit more complicated. E.g. when you want to include two different borders in same place (visually), while one being TOP for one row, and second being BOTTOM for other row. They will collapse (= only one of them will be shown). Then you have to study how is border's "priority" calculated and what border styles are "stronger" (double vs. solid etc.).
I did like this:
<table cellspacing="0" cellpadding="0">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
----------
.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}
Now, with border collapse, this won't work as there is always one border removed. I have to do it in some other way (there are more solutions ofc). One possibility is using CSS3 with box-shadow:
<table class="tab">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}
</style>
You could also use something like "groove|ridge|inset|outset" border style with just a single border. But for me, this is not optimal, because I can't control both colors.
Maybe there is some simple and nice solution for collapsing borders, but I haven't seen it yet and I honestly haven't spent much time on it. Maybe someone here will be able to show me/us ;)
Removing border from table cells
Just collapse the table borders and remove the borders from table cells (td
elements).
table {
border: 1px solid #CCC;
border-collapse: collapse;
}
td {
border: none;
}
Without explicitly setting border-collapse
cross-browser removal of table cell borders is not guaranteed.
Removing unwanted table cell borders with CSS
You need to add this to your CSS:
table { border-collapse:collapse }
Remove Border from HTML Table
Add a @media print
rule to your stylesheet, and remove the border on both the table
and first cell.
body { /* for demo */ margin: 20px !important;}
#myHeader > tbody tr:first-of-type td { border-color: #f9f9f9; border-bottom: 0;}
#myHeader tr:nth-of-type(2) td { border-top: none;}
@media print { table { border: 0 !important; } #myHeader tr:first-of-type td { border: 0 !important; }}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><table id="myHeader" class="table table-striped table-hover table-bordered table-responsive"> <tr> <td colspan="4"> <h1 class="text-center">Company</h1> </td> </tr> <tr> <td colspan="4"> <h1 class="text-center">Number</h1> </td> </tr> <tr> <td colspan="2"> <h3><span style="float: left;">Cutomer (Invoice No.)</span></h3> </td> <td colspan="2"> <h3><span style="float: right;">Date</span></h3> </td> </tr> <tr> <th>Sr.</th> <th>Item</th> <th>Qty</th> <th>Amount</th> </tr>
<tr> <td>1</td> <td>Shirt (D.C)</td> <td>5</td> <td>200</td> </tr> <tr> <td>2</td> <td>Shirt (Iron)</td> <td>5</td> <td>200</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="2"><strong>Four Hundred Rupees Only</strong></td> <td><strong>Total:</strong></td> <td><strong>400</strong></td> </tr>
</table>
How to remove table border completely from an HTML page
Because of the "Cascade" part of CSS, you are overriding your own "no border!" styles with styles that add a border back in. The commas you are using between selectors in your CSS
table#t01, th, td { ... }
table#t02, th, td { ... }
mean that the following styles are applied to ALL th, td, not just ones that are in table#01 or table#02
ALso, you do not need to add in "table" before "#01" and "#02" - you are using IDs for the tables - you don't need to be more specific and say that the selector apples to all Tables that have an ID of #01/#02.
The following CSS will clean things up for you. Also, you are applying "font-size: 80%" twice in your tables (through the table and through the td styles). You may want to reevaluate your math so you don't have to set that twice.
span.note1 {float:left}
span.note2 {font-size:80%}
table {
border-collapse: collapse;
width:300px;
font-size:80%;
}
th, td {
font-size: 80%;
}
#t02, #t02 th, #t02 td {
border: 1px solid black;
}
how to remove table border line?
<table border="0" style="width:825px;"> </table>
put border value 0 in css or declare table border like these above i mentioned.. post ur full css code..
How to remove td border with html?
To remove borders between cells, while retaining the border around the table, add the attribute rules=none
to the table
tag.
There is no way in HTML to achieve the rendering specified in the last figure of the question. There are various tricky workarounds that are based on using some other markup structure.
Removing outer border in html table
Here is how you can do it, you just need to add the n-bordered
class
to each table where you don't want the outer borders.
.border-none {
border-collapse: collapse;
border: none;
}
.border-none td {
border: 1px solid black;
}
.border-none tr:first-child td {
border-top: none;
}
.border-none tr:last-child td {
border-bottom: none;
}
.border-none tr td:first-child {
border-left: none;
}
.border-none tr td:last-child {
border-right: none;
}
<table class="border-none">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
<tr>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
</table>
How do i remove ugly table cell borders?
You don't have table borders
at all. Those borders were created by the border="20"
attributes you have hardcoded into your img tags.
<img src="/images/MV-B-BLK1.jpg" alt="xxxxxxxxxxx" title="Click to view" border="20" hspace="20" /></a>
Change or remove the border="20"
and see what happens.
The reason the color is blue, is that it is the default unstyled color for an anchor tag, which you get because all the images are children of anchor tags.
In the future, please familiarize yourself with the chrome devtools. A quick inspection of these elements would show you what you are looking at for any individual element on the page, and what styles are applied to it.
Related Topics
How to Make a Transparent Canvas in HTML5
Restrict Future Dates in HTML5 Date Input
How to Create a Polygon Shape Div
How to Notify the HTML Container That the Swf Has Finished, Using Swfobject
How to Disable Form Fields Using CSS
What Are the CSS Properties That Get Elements Out of the Normal Flow
Html5 Video Not Working on iPad
What Is the Purpose of .Row in Bootstrap
How to Show Dots ("...") in a Span with Hidden Overflow
How to Link HTML Pages in Same or Different Folders
Easiest Way to Extract the Urls from an HTML Page Using Sed or Awk Only
Why Does Inline-Block Cause This Div to Have Height
How to Style Individual Parts of an Input Placeholder
Mailto Link Multiple Body Lines
Html-Tooltip Position Relative to Mouse Pointer
CSS - Relative Positioned Parent Div Not Stretching to Absolute Child Div Height
What Happens If the Meta Tags Are Present in the Document Body