擺脫使用CSS的表格中的水平邊框

我想擺脫中間的水平線。基本上，我希望桌子有中間的外邊框和垂直分隔線。我如何實現這一目標？擺脫使用CSS的表格中的水平邊框

table { 
 
    width: 85%; 
 
    border-collapse: collapse; 
 
    margin-left: 4%; 
 
    border: 1px solid black; 
 
} 
 

 
th { 
 
    text-align: left; 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    padding: 5px 11px; 
 
} 
 

 
td { 
 
    text-align: left; 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    padding: 5px 11px; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem Ipsum is simply dummy text of the printing and </td> 
 
     <td>It is a long established fact that a </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

提前感謝！

來源

2017-09-19 Archit Arora

您可以用邊界撥弄：

設置border-top: none爲td小號
設置border-bottom: none爲th

添加是爲了防止水平線，當有多個tr S：

tr:not(:last-child) td { 
border-bottom: none; 
}

請參見下面的演示：

table { 
 
    width: 85%; 
 
    border-collapse: collapse; 
 
    margin-left: 4%; 
 
    /*border: 1px solid black;*/ 
 
} 
 

 
th { 
 
    text-align: left; 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    border-bottom: none; /* ADDED */ 
 
    padding: 5px 11px; 
 
} 
 

 
td { 
 
    text-align: left; 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    border-top: none; /* ADDED */ 
 
    padding: 5px 11px; 
 
} 
 

 
tr:not(:last-child) td { /* ADDED */ 
 
    border-bottom: none; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem Ipsum is simply dummy text of the printing and </td> 
 
     <td>It is a long established fact that a </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem Ipsum is simply dummy text of the printing and </td> 
 
     <td>It is a long established fact that a </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2017-09-19 01:37:44 kukkuz

th, td {border: none; border-right: 1px solid black;}

來源

2017-09-19 01:32:57 SEFL

我覺得這是你找什麼：

table { 
    width: 85%; 
    border-collapse: collapse; 
    margin-left: 4%; 
    border: 1px solid black; 
} 
th { 
    text-align: left; 
    width: 50%; 
    border: 1px solid black; 
    padding: 5px 11px; 
    border-bottom: None; 
} 
td { 
    text-align: left; 
    width: 50%; 
    border: 1px solid black; 
    padding: 5px 11px; 
    border-top: None; 
}

來源

2017-09-19 01:33:46

更新

https://jsfiddle.net/kac69ovn/1/

table { 
    width: 85%; 
    border-collapse: collapse; 
    margin-left: 4%; 
    border: 1px solid black; 
} 
th { 
    text-align: left; 
    width: 50%; 
    border-right: 1px solid black; 
    padding: 5px 11px; 
} 
td { 
    text-align: left; 
    width: 50%; 
    border-right: 1px solid black; 
    padding: 5px 11px; 
}

來源

2017-09-19 01:34:58 Sameer

保持你的桌子上滿邊界，但堅持border-left和border-right爲您的th和td元素。

table { 
 
    width: 85%; 
 
    border-collapse: collapse; 
 
    margin-left: 4%; 
 
    border: 1px solid black; 
 
} 
 
th, td { 
 
    text-align: left; 
 
    width: 50%; 
 
    border-right: 1px solid black; 
 
    border-left: 1px solid black; 
 
    padding: 5px 11px; 
 
}

<table> 
 
     <tbody> 
 
      <tr> 
 
      <th>Firstname</th> 
 
      <th>Lastname</th> 
 
      </tr> 
 
      <tr> 
 
      <td>Lorem Ipsum is simply dummy text of the printing and </td> 
 
      <td>It is a long established fact that a </td> 
 
      </tr> 
 
     </tbody> 
 
    </table>

來源

2017-09-19 01:35:19 arbuthnott

擺脫使用CSS的表格中的水平邊框

回答

相關問題