代码之家  ›  专栏  ›  技术社区  ›  300

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

html css
  •  0
  • 300  · 技术社区  · 10 年前

    我正在尝试完全删除表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">

    我想我缺少设置一些表属性/属性,因此使用了它的默认值,边框保持原样。

    你能告诉我还有什么其他选项可以让表格边框完全消失吗?

    以下是我的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 回复  |  直到 10 年前
        1
  •  2
  •   Andrea    10 年前

    由于CSS的“层叠”部分,您正在覆盖自己的“无边框!”具有添加边框的样式的样式。CSS中选择器之间使用的逗号 表#t01,th,td{…} 表#t02,th,td{…} 意味着以下样式应用于所有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; 
}
        2
  •  1
  •   Lance    10 年前

    第二个表的声明中的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%;  
}
        3
  •  1
  •   gaynorvader    10 年前

    我认为你的css使用了错误的标记。而不是 table#t01, th, td 您想使用 table#t01, #t01 th, #t01 td 如 th 属于 #t01 以及 td 属于 #时间t01 而不是所有人的边界 第 和 标准差 在下一个css中被覆盖 table#t02, th, td

        4
  •  1
  •   Maria Ines Parnisari    10 年前

    此CSS将工作( jsfiddle ). 您只需要更具体地针对元素。 

    #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%;
}
        5
  •  1
  •   Ghulam Ali    10 年前

    添加此 

    table#t01{border:none}
        6
  •  1
  •   Muhammad    10 年前

    您已经删除了第一个选择中的边框,但通过将 td 和 th 整个页面,但不是 标准差 和 第 在第二个选择中,应将 标准差 和 第 在第2个表中,只需查看下面的代码片段我如何删除边框。:-) 

    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>
        7
  •  0
  •   Tal    10 年前

    这个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%;  
  }
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    6 月前
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    6 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    6 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    6 月前
    Reegan  ·  使用Angular ngFor指令在html中渲染嵌套对象值
    6 月前
    wqyutv  ·  当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?
    6 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    7 月前
    Gukkey  ·  在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?
    7 月前
    Lorenzo Bertolaccini  ·  在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
    7 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    7 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号