CODEWITHSUNDEEP
csshtml
300
300

Reputation: 1031

How to remove table border completely from an HTML page

I am trying to remove table border completely for table id="t01" (if possible in a way supported by HTML5 as well) and have tried following options but none have removed the border so far.

In css:
    border: 0;
    border-collapse:collapse;
    border: none !important;
    border-spacing: 0;
    border-padding: 0;
In table tag:
    <table id="t01", border="0", cellspacing="0", cellpadding="0">

I think I am missing to set some table property/attribute and so it's default value is being used and the border stays as it is.

Can you please suggest me what other options I can try to make the table border disappear completely?

Following is my HTML and as this will be a single web page, I am not using a seperate css file.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Dashboard</title>
<style>
span.note1 {float:left}
span.note2 {font-size:80%}
table#t01, th, td {     
    width:300px;
    font-size:80%;
    border-spacing: 0;
    border-padding: 0;
    border: none;
    border-collapse: collapse;
}
table#t02, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    width:300px;
    font-size:80%;  
}
</style>
</head>
<body>
<div style="float:left; width:50%; background-color:AliceBlue">
<b>Call Volume Tab Configuration</b>
<table id="t01", border="0" cellspacing="0" cellpadding="0">
  <caption><span class="note1">Customize your personal view of the Call Volume Tab.</span></caption>
  <tr>
    <td><form><input type="checkbox" name="trunk_usage" value="1">% Trunk Usage</form></td>
    <td><form><input type="checkbox" name="pre_ivr" value="1">Pre-IVR Call Volume</form></td>    
  </tr>
  <tr>
    <td><form><input type="checkbox" name="trunk_group" value="1">Trunk Group Utilization</form></td>
    <td><form><input type="checkbox" name="average_speed" value="1">Average Speed of Answer</form></td>    
  </tr>
  <tr>
    <td><form><input type="checkbox" name="outage_call" value="1">Outage Call Volume</form></td>
    <td><form><input type="checkbox" name="ivr_call" value="1">IVR Call Volume</form></td>    
  </tr>
  <tr>
    <td><form><input type="checkbox" name="non_outage_call" value="1">Non-Outage Call Volume</form></td>
    <td><form><input type="checkbox" name="post_ivr" value="1">Post-IVR Call Volume</form></td>    
  </tr>
</table>
<br /><span class="note2">Customize your personal thresholds that trigger alerts on the Call Volume Tab.</span>
</div>

<div style="float:left; width:50%; background-color:LightCyan">
<table id="t02", align="center">
  <caption>Call Volume Suppressed Alert History</caption>
  <tr style="background-color:SkyBlue">
    <th>AlertID</th>
    <th>Alert Action</th>       
    <th>UserID</th>
    <th>Time</th>
    <th>Comments</th>
  </tr>
  <tr>
    <td>10334</td>
    <td>Suppress</td>       
    <td>JSmith</td>
    <th>12:25:03 PM</th>
    <th>ticket #11111</th>
  </tr>
  <tr>
    <td>10225</td>
    <td>Suppress</td>       
    <td>JWilson</td>
    <th>12:25:03 PM</th>
    <th>ticket #11111</th>
  </tr>
  <tr>
    <td>10558</td>
    <td>Suppress</td>       
    <td>JSmith</td>
    <th>12:25:03 PM</th>
    <th>ticket #11111</th>
  </tr>
  <tr>
    <td>10559</td>
    <td>Suppress</td>       
    <td>JSmith</td>
    <th>12:25:03 PM</th>
    <th>ticket #11111</th>
  </tr>
</table>
</div>
</body>
</html>

Upvotes: 0

Views: 1699

Answers (7)

Tal
Tal

Reputation: 1231

This css should work-

 table#t01, th, td {     
  width:300px;
  font-size:80%;
  border-spacing: 0;
  border-padding: 0;
  border: none;
  border-collapse: collapse;
  }
  table#t02, #t02 th, #t02 td {
  border: 1px solid black;
  border-collapse: collapse;
  width:300px;
  font-size:80%;  
  }

Upvotes: 0

Muhammad
Muhammad

Reputation: 7324

You have removed the border in the first selection but again added in the second selection by targeting the td and th of whole page but not the td and th of second table, in the second selection you should target the td and th of the 2nd table, just see the following code snippet how I have removed the border. :-) 

span.note1 {float:left}
span.note2 {font-size:80%}
table#t01, th, td {     
    width:300px;
    font-size:80%;
    border-spacing: 0;
    border-padding: 0;
    border: none;
    border-collapse: collapse;
}
table#t02, #t02 th, #t02 td {
    border: 1px solid black;
    border-collapse: collapse;
    width:300px;
    font-size:80%;  
}
<div style="float:left; width:50%; background-color:AliceBlue">
<b>Call Volume Tab Configuration</b>
<table id="t01", border="0" cellspacing="0" cellpadding="0">
  <caption><span class="note1">Customize your personal view of the Call Volume Tab.</span></caption>
  <tr>
    <td><form><input type="checkbox" name="trunk_usage" value="1">% Trunk Usage</form></td>
    <td><form><input type="checkbox" name="pre_ivr" value="1">Pre-IVR Call Volume</form></td>    
  </tr>
  <tr>
    <td><form><input type="checkbox" name="trunk_group" value="1">Trunk Group Utilization</form></td>
    <td><form><input type="checkbox" name="average_speed" value="1">Average Speed of Answer</form></td>    
  </tr>
  <tr>
    <td><form><input type="checkbox" name="outage_call" value="1">Outage Call Volume</form></td>
    <td><form><input type="checkbox" name="ivr_call" value="1">IVR Call Volume</form></td>    
  </tr>
  <tr>
    <td><form><input type="checkbox" name="non_outage_call" value="1">Non-Outage Call Volume</form></td>
    <td><form><input type="checkbox" name="post_ivr" value="1">Post-IVR Call Volume</form></td>    
  </tr>
</table>
<br /><span class="note2">Customize your personal thresholds that trigger alerts on the Call Volume Tab.</span>
</div>

<div style="float:left; width:50%; background-color:LightCyan">
<table id="t02", align="center">
  <caption>Call Volume Suppressed Alert History</caption>
  <tr style="background-color:SkyBlue">
    <th>AlertID</th>
    <th>Alert Action</th>       
    <th>UserID</th>
    <th>Time</th>
    <th>Comments</th>
  </tr>
  <tr>
    <td>10334</td>
    <td>Suppress</td>       
    <td>JSmith</td>
    <th>12:25:03 PM</th>
    <th>ticket #11111</th>
  </tr>
  <tr>
    <td>10225</td>
    <td>Suppress</td>       
    <td>JWilson</td>
    <th>12:25:03 PM</th>
    <th>ticket #11111</th>
  </tr>
  <tr>
    <td>10558</td>
    <td>Suppress</td>       
    <td>JSmith</td>
    <th>12:25:03 PM</th>
    <th>ticket #11111</th>
  </tr>
  <tr>
    <td>10559</td>
    <td>Suppress</td>       
    <td>JSmith</td>
    <th>12:25:03 PM</th>
    <th>ticket #11111</th>
  </tr>
</table>
</div>

Upvotes: 1

Andrea
Andrea

Reputation: 849

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; 
}

Upvotes: 2

Ghulam Ali
Ghulam Ali

Reputation: 357

add this 

table#t01{border:none}

Upvotes: 1

Maria Ines Parnisari
Maria Ines Parnisari

Reputation: 17466

This CSS will work (jsfiddle). You just need to target elements more specifically.

#t01, #t01 td {
    width: 300px;
    font-size: 80%;
    border: 0;
}
#t02, #t02 th, #t02 td {
    border: 1px solid black;
    border-collapse: collapse;
    width: 300px;
    font-size: 80%;
}

Upvotes: 1

gaynorvader
gaynorvader

Reputation: 2657

I think you've used the wrong markup for your css. Instead of table#t01, th, td you want to use table#t01, #t01 th, #t01 td as in the th of #t01 and the td of #t01 rather than your borders for all th and td being overwritten on your next css table#t02, th, td

Upvotes: 1

Lance
Lance

Reputation: 3932

The th and td styles in the declaration for your second table are overwriting those in the first. Change your selectors like this:

#t01, #t01 th, #t01 td {     
width:300px;
font-size:80%;
border-spacing: 0;
border-padding: 0;
border: none;
border-collapse: collapse;
}
#t02, #t02 th, #t02 td {
border: 1px solid black;
border-collapse: collapse;
width:300px;
font-size:80%;  
}

Upvotes: 1

Related Questions