Fatal编程技术网
  • css/
  • Css 如何从HTML页面中完全删除表边框

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

css html

Css 如何从HTML页面中完全删除表边框,css,html,Css,Html,我正在尝试完全删除table id=“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

我正在尝试完全删除table id=“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">
css中的
：
边界：0；
边界塌陷：塌陷；
边界：没有！重要的；
边界间距：0；
边框填充：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>


仪表板
span.note1{float:left}
span.note2{字体大小：80%}
表#t01，th，td{
宽度：300px；
字号：80%；
边界间距：0；
边框填充：0；
边界：无；
边界塌陷：塌陷；
}
表t02，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
宽度：300px；
字号：80%；
}
呼叫音量选项卡配置
自定义呼叫音量选项卡的个人视图。
%主干使用
IVR前通话量
中继组利用率
平均答题速度
中断呼叫量
IVR呼叫量
非中断呼叫量
IVR后通话量

自定义触发“通话量”选项卡上警报的个人阈值。
呼叫音量抑制警报历史记录
AlertID
警戒行动
用户ID
时间
评论
10334
抑制
犹太教
下午12:25:03
车票#11111
10225
抑制
威尔逊
下午12:25:03
车票#11111
10558
抑制
犹太教
下午12:25:03
车票#11111
10559
抑制
犹太教
下午12:25:03
车票#11111
第二个表声明中的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%;  
}
我认为你的css使用了错误的标记。您希望使用
table#t01、th、td
而不是
table#t01、th、t01 td
中的
th
和
td
中的
td
，而不是在下一个css
table、t2、t2中覆盖所有
th
和
td
的边框，td

此CSS将起作用（）。您只需要更具体地针对元素

#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%;
}
加上这个

table#t01{border:none}
您在第一个选择中删除了边框，但在第二个选择中再次添加了边框，方法是针对整个页面的
td
和
th
，而不是第二个表的
td
和
th
，在第二个选择中，您应该针对第二个表的
td
和
th
，请参见下面的代码片段，了解我是如何删除边框的。：-）

span.note1{float:left}
span.note2{字体大小：80%}
表#t01，th，td{
宽度：300px；
字号：80%；
边界间距：0；
边框填充：0；
边界：无；
边界塌陷：塌陷；
}
表#t02、#t02 th、#t02 td{
边框：1px纯黑；
边界塌陷：塌陷；
宽度：300px；
字号：80%；
}

呼叫音量选项卡配置
自定义呼叫音量选项卡的个人视图。
%主干使用
IVR前通话量
中继组利用率
平均答题速度
中断呼叫量
IVR呼叫量
非中断呼叫量
IVR后通话量

自定义触发“通话量”选项卡上警报的个人阈值。
呼叫音量抑制警报历史记录
AlertID
警戒行动
用户ID
时间
评论
10334
抑制
犹太教
下午12:25:03
车票#11111
10225
抑制
威尔逊
下午12:25:03
车票#11111
10558
抑制
犹太教
下午12:25:03
车票#11111
10559
抑制
犹太教
下午12:25:03
车票#11111
由于CSS的“级联”部分，您正在使用添加边框的样式覆盖您自己的“无边框！”样式。CSS中选择器之间使用的逗号 表#t01，th，td{…} 表#t02，th，td{…} 这意味着以下样式适用于所有th、td，而不仅仅是表01或表02中的样式

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

下面的CSS将为您清理这些内容。此外，您在表格中应用了两次“字体大小：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; 
}
这个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%;  
  }
只需删除表#t02，th，td{border:1px solid black；}，就不会有边框了：）谢谢大家。我很高兴在这么短的时间内得到了这么多的回复。我通过为表th和td指定适当的#t01和#t02来纠正这个问题。我希望我的团队中有像你这样的人做同行评议：-）