如何从html表中删除垂直线？

时间：2014-05-09 09:52:14

标签： html css

您好我想从html表中删除垂直线，只有特定的垂直线想在我的html表中删除只有3条垂直线，我只想删除1和3行

这是我的代码

<html>
<head>
<style type="text/css">
.table1{

 background: -moz-linear-gradient(-90deg, #003471, #448CCB);
 background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));

}
table, th, td {
  border-left: none;
  border-right: none;
}
</style>
</head>
<body>
   <div id="div1" class='display'>

           <table  width="100%" border="1" align="center" cellpadding="0" cellspacing="1" bordercolor='66A8FF'>
           <tr class="table1" style="border-collapse:collapse">
           <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text1</font></td>   
           <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text2</font></td>
            <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text3</font></td>  
             <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text4</font></td>   
            </tr>
            <tr class="table1" style="border-collapse:collapse">
           <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text1</font></td>   
           <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text2</font></td>
            <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text3</font></td>  
             <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text4</font></td>   
            </tr>
            </table>
               </div>
</body>
</html>

这是我的JSFiddle

我怎样才能实现我的目标

提前致谢

4 个答案:

答案 0 :(得分：2)

Demo Fiddle

使用CSS：

table{
    border-collapse:collapse;
}
td:nth-child(2){
    border-right:1px solid white;
}

答案 1 :(得分：0)

我不确定SW4是否有你想要的东西，但我还有其他一些说明：

  • 尽可能多地使用CSS。这使得阅读和更改代码变得更加容易。
  • 小心覆盖标准标签。您可能希望拥有不同的表类。所以请使用.table1 td而不是td。我认为只有css重置才能覆盖标签
  • 一致的标识使您的代码更易于阅读。我使用Sublime Text和 Ctrl + Shift + r 来重新加入像你这样的代码。
  • described here等外部CSS样式表文件可帮助您更轻松地阅读文件。
  • 查看CSS Selectors

CSS 

.table1{
    background: -moz-linear-gradient(-90deg, #003471, #448CCB);
    background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
    border: 1px solid #66A8FF;
}

table, th, td {
    border-left: none;
    border-right: none;
}

td {
    font-size:28px;
    color: #fff;
    text-align: center;
    height: 48px;
}

table{
    border-collapse:collapse;
}

td:nth-child(2){
    border-right:1px solid white;
}

HTML 

<table  width="100%" border="1" align="center" cellpadding="0" cellspacing="1">
    <tr class="table1" style="border-collapse:collapse">
        <td  width="25%">Text1</td>
        <td  width="25%">Text2</td>
        <td  width="25%">Text3</td>
        <td  width="25%">Text4</td>
    </tr>
    <tr class="table1" style="border-collapse:collapse">
        <td  width="25%">Text1</td>
        <td  width="25%">Text2</td>
        <td  width="25%">Text3</td>
        <td  width="25%">Text4</td>
    </tr>
</table>

的jsfiddle

http://jsfiddle.net/MartinThoma/B6WZY/

enter image description here

答案 2 :(得分：0)

为第二个td设置类并应用border-right：2px solid #FFF。

例如：

<html>
<head>
<style type="text/css">
.table1{

 background: -moz-linear-gradient(-90deg, #003471, #448CCB);
 background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));

}
table, th, td {

  border-right: none;
}
.set_border
{
border-right:3px solid #FFF;
}
</style>
</head>
<body>
   <div id="div1" class='display'>

           <table  width="100%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor='66A8FF'>
           <tr class="table1" style="border-collapse:collapse">
           <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text1</font></td>   
           <td  width="25%"  height="48px" align="center" style="font-size:28px" class="set_border"><font color="#fff">Text2</font></td>
            <td  width="25%"  height="48px" align="center" style="font-size:28px" ><font color="#fff">Text3</font></td>  
             <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text4</font></td>   
            </tr>
            <tr class="table1" style="border-collapse:collapse">
           <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text1</font></td>   
           <td  width="25%"  height="48px" align="center" style="font-size:28px" class="set_border"><font color="#fff">Text2</font></td>
            <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text3</font></td>  
             <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text4</font></td>   
            </tr>
            </table>
               </div>
</body>
</html>

答案 3 :(得分：0)

Img这是您提出的代码

     <div id="div1" class='display'>

       <table  width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor='66A8FF'>
       <tr class="table1" style="border-collapse:collapse">
       <td   width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text1</font></td>   
       <td class="remove_line"  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text2</font></td>
        <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text3</font></td>  
         <td class="remove_line1"  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text4</font></td>   
        </tr>
        <tr class="table1" style="border-collapse:collapse">
       <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text1</font></td>   
       <td class="remove_line"  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text2</font></td>
        <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text3</font></td>  
         <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text4</font></td>   
        </tr>
        </table>
           </div>

和CSS 

.table1{

 background: -moz-linear-gradient(-90deg, #003471, #448CCB);
 background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));

 }
table, th, td {

}
.remove_line{
border-right:2px solid red;    
}
相关问题
最新问题