web-dev-qa-db-ja.com

表のセルから境界線を削除する

私はこれが馬鹿げた質問であることを知っていますが、どうすればいいかを完全に忘れてしまったようです。

HTML tableがあり、すべてのセルの周囲のすべての境界線を削除して、テーブル全体の周囲に境界線が1つだけになるようにします。

私のコードは次のようになります：

<table border='1' width='500'>
  <tr><th><h1>Your Wheelbarrow</h1></th><tr>
    <th>Product</th>
    <th>Description</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
    <th>Delete</th>
  </tr>
htmlcssxhtmlhtml-table
31
user1278496

テーブルの境界線を折りたたんで、テーブルのセル（td要素）から境界線を削除するだけです。

table {
    border: 1px solid #CCC;
    border-collapse: collapse;
}

td {
    border: none;
}

border-collapseクロスブラウザを明示的に設定しないと、テーブルセルの境界線の削除は保証されません。

57
brezanac

目的のHTML属性はrules=none（tableタグに挿入されます）です。

14
Jukka K. Korpela
<style type="text/css">
table {
  border:1px solid black;
}
</style>
3
js1568

これを試してみてください： http://jsfiddle.net/QPKVX/

最終的なレイアウトをどのように表示するかはわかりませんが、colspanの問題も修正されます。

3
mikevoermans

クラス（たとえば[.table1]）を持つdiv内でテーブルを使用し、CSSでこのテーブルに境界線を設定しないでください。次に、そのクラスのCSSコードを使用します。

.table1 {border=1px solid black;}
3
perfectionist1

おそらくこのCSSルールが必要だったでしょう：

table {
   border-spacing: 0px;
}

http://jsfiddle.net/Bz3Jt/3/

2
gumkins

テーブル宣言を次のように変更します。

<table style="border: 1px dashed; width: 500px;">

実際のサンプルを次に示します。 http://jsfiddle.net/kc48k/

2
hjpotter92

このページの解決策のいずれも機能せず、以下の問題がある場合：

enter image description here

次のCSSスニペットを使用できます。

td {
   padding: 0;
}
0
The Codesee