Remove Border from HTML Table

Remove Border from HTML Table - html

I want to remove borders (horizontal & vertical) lines both from the first row of the below snippet:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<br /><br /><br /><table id="myHeader" class="table table-bordered table-responsive">
<tr style="border: none;">
<td colspan="4" style="border: none;">
<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>
<tbody>
<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>
</tbody>
</table>
I tried the below code but no change was detected!
Tried:
<tr style="border: none;">
<td colspan="4" style="border: none;">
<h1 class="text-center">Company</h1>
</td>
</tr>
I don't want any type of line (horizontal & vertical) to be displayed for the first row of the table. i.e: Company one.

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>

You don't have any border on company but you have border on table and number which is making border around company. Removing them will do the trick
#media print {
table {
border: 0 !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<br /><br /><br />
<table id="myHeader" class="table table-bordered table-responsive" style="border:none;">
<tr class="rem" style="border: none;">
<td colspan="4" class="rem" style="border: none;">
<h1 class="text-center">Company</h1>
</td>
</tr>
<tr>
<td colspan="4" class="rem" style="border:none;">
<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>
<tbody>
<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>
</tbody>
</table>

The border property was from the linked stylesheet. Updated your code by adding this - style="border:none !important" to both company and number.
Works fine now. But your code can be cleaner if you separate your css from your html.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<br /><br /><br /><table id="myHeader" class="table table-bordered table-responsive">
<tr style="border: none;">
<td colspan="4" style="border:none !important" >
<h1 class="text-center">Company</h1>
</td>
</tr>
<tr>
<td colspan="4" style="border:none !important" >
<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>
<tbody>
<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>
</tbody>
</table>
_____________________________________________
Updated Code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<br /><br /><br /><table id="myHeader" class="table table-bordered table-responsive" style="border-top:none !important; border-right:none !important; border-left:none !important">
<tr style="">
<td colspan="4" style="border:none !important" >
<h1 class="text-center">Company</h1>
</td>
</tr>
<tr>
<td colspan="4" style="border:none !important; " >
<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>
<tbody>
<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>
</tbody>
</table>
</body>
</html>

Related

how to make table in html using rowspan and colspan?

How to build this table in html ??
I want to make table using rowspan and colspan ?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<table class="table table-bordered">
<thead>
<th>Subject</th>
<th>Result</th>
</thead>
<tbody>
<tr>
<td>Science</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Other Science</td>
<td>Math</td>
<td>English</td>
</tr>
</tbody>
</table>

You can learn about <table> tags at MDN
You can do this:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<table class="table table-bordered">
<thead>
<tr>
<th colspan="2">Subject</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Science</td>
<td>Physics</td>
<td>A</td>
</tr>
<tr>
<td>Chemistry</td>
<td>A</td>
</tr>
<tr>
<td rowspan="2">Other Science</td>
<td>Biology</td>
<td>B</td>
</tr>
<tr>
<td>Geography</td>
<td>A</td>
</tr>
<tr>
<td colspan="2">Math</td>
<td>A+</td>
</tr>
<tr>
<td colspan="2">English</td>
<td>A+</td>
</tr>
</tbody>
</table>

This is set-up with colspan and rowspan
table {
border-collapse: collapse;
}
table,
tr,
th,
td {
border: 1px solid #000;
}
th {
padding: 1ex;
background: #ccc;
}
td {
padding: 1ex;
}
.divide td {
border-top: 3px solid;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<table class="table table-bordered">
<thead>
<th colspan="2">Subject</th>
<th>Result</th>
</thead>
<tbody>
<tr>
<td rowspan="2" colspan="1" width="100px">
SCIENCE
</td>
<td>
Physics
</td>
<td>A</td>
</tr>
<tr>
<td>
<span>Chemistry</span>
</td>
<td colspan="1">A</td>
</tr>
<tr>
<td rowspan="2" colspan="1" width="100px">
SCIENCE
</td>
<td>
Physics
</td>
<td>A</td>
</tr>
<tr>
<td>
<span>Chemistry</span>
</td>
<td colspan="1">A</td>
</tr>
<tr>
<td colspan="2">
SCIENCE
</td>
<td>A</td>
</tr>
<tr>
<td colspan="2">
SCIENCE
</td>
<td>A</td>
</tr>
</tbody>
</table>
<br>
<br>
<table>
<tr>
<th>head</th>
<th>title</th>
<th>title</th>
<th>title</th>
<th></th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">white</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">gray</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>white</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">gray</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
</table>

Creating complex table structure without using css

I am trying to make this table in HTML without using CSS, but I am not getting the desired output. I have tried a bunch of other combinations for the row with 6:2:3 rowspan.
This is the desired output
This is the code I am using.
<!doctype html>
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="3"> </th>
<th colspan="3"> </th>
</tr>
<tr>
<th colspan="2"> </th>
<th rowspan="2"> </th>
</tr>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td > </td>
</tr>
<tr>
<td > </td>
</tr>
<tr>
<td rowspan="6"> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td rowspan="3"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td rowspan="3"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

Done Heights may not be set but it works properly
table,
td {
border: 1px solid black;
}
td {
height: 50px;
}
<table style="width:100%">
<tr>
<td>5</td>
<td colspan="3">
<table style="width:100%">
<tr>
<td>
<table style="width:100%;margin-top:50px;">
<tr>
<td>6</td>
</tr>
</table>
</td>
<td>7</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>
<table style="width:100%">
<tr>
<td>11</td>
</tr>
</table>
<table style="width:100%">
<tr>
<td>12</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td class="not">
<table style="width:100%">
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
<tr>
<td>15</td>
</tr>
</table>
</td>
<td colspan="2">
<table style="width:100%">
<tr>
<td>16</td>
</tr>
<tr>
<td>17</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>18</td>
<td>16</td>
<td>20</td>
<td>21</td>
</tr>
</table>

How to set the entire row height twice as the others in html table

I have two tables. One with additional invisible <td> and one without. The problem is that the second table's rowspan is not working, the entire row just collapses. How could I get the result like in the first table without adding that unnecessary <td>?
HTML:
.table-height td {
height: 30px;
}
.invisible {
width: 1px;
}
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
<td className='invisible'></td>
</tr>
<tr>
<td className='invisible'></td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td className='invisible'></td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
<td className='invisible'></td>
</tr>
</tbody>
</table>
</p>
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</tbody>
</table>
</p>

Finally I got it right. I just need to set the height for <tr> too (same as for </td>)
.table-height td, tr {
height: 30px;
}
.invisible {
width: 1px;
}
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</tbody>
</table>
</p>

setting rowspan in td table

i wanna create something like this in my table
i try with this code, but the result far from what i want
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
</tr>
<tr>
<td>SubItem1a</td>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1a</td>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
or
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
<td>
<tr>SubItem1a</tr>
<tr>Subitem1b</tr>
<tr>Subitem1c</tr>
</td>
<td>
<tr>AnotherSub1a</tr>
<tr>AnotherSub1b</tr>
<tr>AnotherSub1c</tr>
</td>
</tr>
</table>
how to archive table like image?

Now used to this code rowspan Attribute
<table border="1" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<tr>
<td rowspan="3" align="center">No</td>
<td rowspan="3" align="center">Item1</td>
<td>SubItem1a</td>
<td>SubItem1a</td>
</tr>
<tr>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>

This will help with your future reference.
I did some example hopefully you understand what is rowspan and colspan.
<h1> Without using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td>10</td>
<td >20</td>
<td >30</td>
<td >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using colspan </h1>
<table border="1">
<tr>
<th colspan="5">Hello World</th>
</tr>
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
DEMO

Bootstrap, how can I make two tables the same "width"

I got two tables as this:
I want them to have the same width, I don't know what it's called but you can see that the columns dosn't have the same width.
Here is my code for it:
<aside>
<table class="table table-bordered" style="margin: 0;">
<thead>
<tr></tr>
<tr></tr>
</thead>
<tbody>
<tr>
<td class="tableHeader">Pilot ID</td>
<td><?php echo 'SAS ' . $results['id'];?></td>
</tr>
<tr>
<td class="tableHeader">First Name</td>
<td><?php echo $results['firstname'];?></td>
</tr>
<tr>
<td class="tableHeader">Last Name</td>
<td><?php echo $results['lastname'];?></td>
</tr>
<tr>
<td class="tableHeader">Age</td>
<td>17</td>
</tr>
<tr>
<td class="tableHeader">Distance Flown</td>
<td>3790 km</td>
</tr>
<tr>
<td class="tableHeader">Flights</td>
<td><?php echo $results['flights'];?></td>
</tr>
<tr>
<td class="tableHeader">Flight Hours</td>
<td><?php echo $results['flighttime'];?></td>
</tr>
</tbody>
</table>
<table class="table table-bordered style="margin: 0;"">
<thead>
<tr></tr>
<tr></tr>
</thead>
<tbody>
<tr>
<td class="tableHeader">737-600</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">737-700</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">737-800</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">A319</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">A320</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">A321</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">A330</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">A340</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">CRJ-900</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">ATR-600</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">717</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">SAB 2000</td>
<td></td>
</tr>
</tbody>
</table>
</aside>
JSFIDDLE: https://jsfiddle.net/ncqmy09c/

You could do.
.table {
table-layout: fixed;
}
http://jsfiddle.net/vawtr0u5/

1) div.row.
2) div.col-xs-6*2.
3) you tables....
like this -> Example jsfiddle
<div class="row">
<div class="col-xs-6">
<table class="table table-bordered" style="margin: 0;">
TABLE 1
</table>
</div>
<div class="col-xs-6">
<table class="table table-bordered" style="margin: 0;">
TABLE 2
</table>
</div>
</div>

You can also use the HTML col width Attribute
<table class="table table-bordered" style="margin: 0;">
<col width="100">
<col width="100">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Fiddle: https://jsfiddle.net/ncqmy09c/1/

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Remove Border from HTML Table - html

Related

how to make table in html using rowspan and colspan?

Creating complex table structure without using css

How to set the entire row height twice as the others in html table

setting rowspan in td table

Bootstrap, how can I make two tables the same "width"

Categories

Resources