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

300 发表于 Dev

300

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

安德里亚

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

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。