如何从HTML页面中完全删除表格边框

时间：2015-08-21 13:46:16

标签： html css html5

我正在尝试完全删除表格边框表格=“t01”（如果可能的话，也支持HTML5），并尝试了以下选项，但目前还没有删除边框。

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">

我认为我缺少设置一些表属性/属性，所以它的默认值正在使用，边框保持原样。

你能否告诉我还有什么其他方法可以让桌边框完全消失？

以下是我的HTML，因为这将是一个单独的网页，我没有使用单独的css文件。

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

7 个答案:

答案 0 :(得分：2)

由于CSS的“Cascade”部分，你将覆盖自己的“无边界”！具有添加边框的样式的样式。您在CSS中的选择器之间使用的逗号 表＃t01，th，td {...} 表＃t02，th，td {...} 表示以下样式应用于ALL th，td，而不仅仅是表＃01或表＃02中的样式

另外，您不需要在“＃01”和“＃02”之前添加“table” - 您正在使用表格的ID - 您不需要更具体，并且说选择器适用于所有ID为＃01 /＃02的表。

以下CSS将为您清理。此外，您在表中应用“font-size：80％”两次（通过表格和td样式）。您可能需要重新评估数学，因此不必设置两次。

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

答案 1 :(得分：1)

第二个表的声明中的th和td样式将覆盖第一个表中的那些样式。像这样改变您的选择器：

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

答案 2 :(得分：1)

我认为你为你的CSS使用了错误的标记。您希望table#t01, th, td使用table#t01, #t01 th, #t01 td，而不是th的{​​{1}}和#t01 td，而不是#t01。 {1}}和th被您的下一个td

覆盖

答案 3 :(得分：1)

这个CSS可以使用（jsfiddle）。您只需要更具体地定位元素。

var counterYes = 0;
for (var i=1; i<=39; i++) 
  {
    var f = this.getField("SSI" + i);
    if (f.value == "True")
      counterYes++; 
  }
  event.value = counterYes;

答案 4 :(得分：1)

添加此

table#t01{border:none}

答案 5 :(得分：1)

您已删除了第一个选区中的边框，但是再次添加到第二个选区中，方法是定位整页的td和th，而不是td和th在第二个表格中，您应该定位第二个表格的td和th，只需看看以下代码段如何删除边框。 :-) 

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>

答案 6 :(得分：0)

这个css应该有效 - 

 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%;  
  }
相关问题
最新问题