テーブル内の特定の行の周りの境界線？

120

テーブルの特定の行の周囲に境界線を配置できるHTML / CSSを設計しようとしています。はい、実際にレイアウトにテーブルを使用することになっているわけではありませんが、完全に置き換えるのに十分なCSSをまだ知りません。

とにかく、私は複数の行と列を持つテーブルを持っています。いくつかはrowspanとcolspanとマージされており、テーブルの一部の周りに単純な境界線を配置したいと思います。現在、私は4つの個別のCSSクラス（上、下、左、右）を使用して<td>います。これらのクラスは、表の上部、下部、左、および右に沿ったセルにそれぞれアタッチします。

.top {
  border-top: thin solid;
  border-color: black;
}

.bottom {
  border-bottom: thin solid;
  border-color: black;
}

.left {
  border-left: thin solid;
  border-color: black;
}

.right {
  border-right: thin solid;
  border-color: black;
}
<html>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr>
      <td class="top left">one</td>
      <td class="top right">two</td>
    </tr>
    <tr>
      <td class="bottom left">three</td>
      <td class="bottom right">four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr>
      <td class="top bottom left right" colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</html>
スニペットを展開

私がやりたいことを簡単に行う方法はありますか？に上と下を適用してみました<tr>が、うまくいきませんでした。（ps私はCSSを初めて使用するので、おそらくこれを見逃した本当に基本的な解決策があるでしょう。）

注：ボーダー付きのセクションを複数持つ必要があります。基本的な考え方は、それぞれが複数の行を含む複数の境界のあるクラスターを持つことです。

html  css  border  css-tables 
— カイル・クロニン
ソース
9
トピック外ですが、言いたかったのですが、表は完全に適切であり、表形式のデータを表示するときに推奨されます...
— md1337

回答:

113

いかがtr {outline: thin solid black;}ですか？TRまたはTBODY要素に私の作品、と表示されます前に、IE 8+を含め、ほとんどのブラウザとの互換性はありませんように。

— 謎
ソース
テーブルの複数の行の周りに単一の境界線を配置し、基本的には視覚的にそれを複数のセクションに分割しますが、同じテーブル内で異なるセクションのものが揃うようにすることを求めていました。
— カイルクロニン2013年
3
わかりました、私もそれが必要でした。ボーダーが必要な行のセットをそれぞれのtbodyで囲みます。上記のcssは、それらのセットの周りにボーダーを作成します。つまり、上部の行に上部ボーダー、下部の行に下部ボーダー、左tbodyのすべての行の右の境界線。境界線は実際にはそれらの行の上にあるのではなく、tbody自体のアウトライン上にあり、効果を説明しようとしています。
— enigment 2013年
ああ、なるほど、複数のtbodyが機能します。これは機能し、私が考慮していなかったものです。賛成投票:)
— カイル・クロニン
かなり動的なデータがない限り、tbodyを定義するのではなく、nth-child（）cssプロパティを使用することをお勧めします。nth-child（）、nth-last-child（）、not（）を使用して、必要な行/セルを選択できます（テーブル内の相対的なインデックスがわかっている限り）。たとえば、tr：not（：nth-​​child（-n + 2））：not（：nth-​​last-child（1））を使用して、上2行と下1行を除くすべての行を選択できます
— BT
1
アウトラインには、要素の特定の側面に隣接する可能性がないことに注意してください。たとえば、「アウトライントップ」はありません。これは限定的なソリューションです
— BT
53

返事をいただいたすべてに感謝します！私はここに提示されたすべての解決策を試してみましたが、他の可能な解決策をインターネットでさらに検索してきました、そして私は有望な解決策を見つけたと思います：

tr.top td {
  border-top: thin solid black;
}

tr.bottom td {
  border-bottom: thin solid black;
}

tr.row td:first-child {
  border-left: thin solid black;
}

tr.row td:last-child {
  border-right: thin solid black;
}
<html>

<head>
</head>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr class="top row">
      <td>one</td>
      <td>two</td>
    </tr>
    <tr class="bottom row">
      <td>three</td>
      <td>four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr class="top bottom row">
      <td colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</body>

</html>
スニペットを展開

出力：

ここに画像の説明を入力してください

代わりに追加することでtop、bottom、left、およびrightすべてのにクラスを<td>、私がしなければならないすべてが追加されtop row、トップに<tr>、bottom row下へ<tr>、そしてrowあらゆるに<tr>間インチ このソリューションに問題はありますか？知っておくべきクロスプラットフォームの問題はありますか？

— カイル・クロニン
ソース
browsershotsを介してテストを実行しただけで、IE（すべてのバージョン）がfirst-child属性とlast-child属性を好まないようです。：-/
— カイルクロニン
1
IE 7および8は最初の子をサポートしているようですが、最後の子（！）はサポートしていません。msdn.microsoft.com/ en
— Mechanical_meat
このcellspacing属性はHTML5では非推奨です。CSS table { border-collapse: collapse; border-spacing: 0; }が今やるべき道のようです。
— Stefan van den Akker 2014
36

親テーブルでborder-collapseスタイルをcollapseに設定すると、tr：をスタイルできるようになります（スタイルはデモ用にインラインです）。

<table style="border-collapse: collapse;">
  <tr>
    <td>No Border</td>
  </tr>
  <tr style="border:2px solid #f00;">
    <td>Border</td>
  </tr>
  <tr>
    <td>No Border</td>
  </tr>
</table>

出力：

HTML出力

— 日の出
ソース
8

私もこれをやって遊んでいましたが、これは私にとって最良の選択肢のようでした：

<style>
    tr { 
        display: table;            /* this makes borders/margins work */
        border: 1px solid black;
        margin: 5px;
    }
</style>

セルは他の行のセルと整列しなくなりますが、境界線/色のフォーマットは引き続き正常に機能するため、これにより流動性/自動列幅の使用が妨げられることに注意してください。解決策は、TRとTDに指定された幅を与えることです（pxまたは％）です。

もちろんtr.myClass、特定の行だけにセレクターを適用する場合は、セレクターを作成できます。どうやらdisplay: tableIE 6/7では機能しないようですが、おそらく他のハック（hasLayout？）が機能する可能性があります。:-(

— サイモン・イースト
ソース
6
この解決策は正しくありません。「display：table」は、行全体を1つのテーブルセルに入れます---テーブルの他の行に対するフォーマットが失われます。私はこれをFirefoxとChromiumで試しました。
— Yaakov Belch、2013
Yaakov、私があなたが言及していることは、流動的な列幅がテーブルの他の行と整列しないことです（このフィドル：jsfiddle.net/MrKtwに見られるように）が、ボーダー/色のフォーマットは引き続き正常に機能します。解決策は、TRとTDに指定された幅（pxまたは％）を与えることです。
— Simon East
サイモン、私が何を言っているのかを示すために、私はフォークしてあなたのフィドルを変えました。これを見てください：jsfiddle.net/a6DZV ---「display：table」フォーマットを1行だけに適用します。ご覧のとおり、これにより、この行が表の1つのセルに効果的に変換されます。つまり、別のテーブルのセル内に1行のテーブルをネストする（この内部テーブルの境界線を表示する）と同じ出力が得られます。あなたのソリューションはDOMにいくつかのノードを保存しますが、互換性はありません。
— Yaakov Belch 2013
3

これは、tbody要素を使用する方法であり、その方法となる可能性があります。tbodyに境界線を設定することはできません（trに設定できないのと同じ）が、背景色は設定できます。境界線ではなく行のグループの背景色で達成したい効果を得ることができる場合、これは機能します。

<table cellspacing="0">  
    <tbody>
        <tr>    
            <td>no border</td>    
            <td>no border here either</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
            <td>one</td>    
            <td>two</td>  
        </tr>  
        <tr>    
            <td>three</td>    
            <td>four</td>  
        </tr>  
    <tbody>
        <tr>    
             <td colspan="2">once again no borders</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
             <td colspan="2">hello</td>  
        </tr>
    <tbody>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>
— sipwiz
ソース
2

<tbody>タグを使用して行をグループ化し、スタイルを適用します。

<table>
  <tr><td>No Style here</td></tr>
  <tbody class="red-outline">
    <tr><td>Style me</td></tr>
    <tr><td>And me</td></tr>
  </tbody>
  <tr><td>No Style here</td></tr>
</table>

そして、style.cssのCSS

.red-outline {
  outline: 1px solid red;
}
— csi
ソース
1

それを行うために私が考えることができる他の唯一の方法は、入れ子になったテーブルで境界線が必要な各行を囲むことです。これにより境界線が簡単になりますが、他のレイアウトの問題が発生する可能性があります。テーブルのセルの幅などを手動で設定する必要があります。

他のレイアウト要件に応じて、あなたのアプローチが最善の方法である可能性があり、ここで提案されているアプローチは、可能な代替策にすぎません。

<table cellspacing="0">  
    <tr>    
        <td>no border</td>    
        <td>no border here either</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>one</td>    
                        <td>two</td>  
                  </tr>  
                  <tr>    
                      <td>three</td>    
                      <td>four</td>  
                  </tr>  
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">once again no borders</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>hello</td>  
                   </tr>
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>
— sipwiz
ソース
ご回答有難うございます; ただし、レイアウトの問題については問題ありません。手動ではなく、列を並べる方がよいと思います。クラスを<tr>タグに適用するのはどうですか？それは可能ですか？
— カイル・クローニン
「table-layout：fixed」のテーブルを使用して各列の幅を明示的に設定した場合（<col>を使用するか、最初の行のセルの幅を設定するだけ）、列はコンテンツに関係なく整列します。テーブルをネストする必要すらありません。3つの別々のテーブルでこの例はうまくいきます。
— ボビンス2009年
1

MxNセルの任意のブロックの周囲に境界を配置するという要件に基づいて、Javascriptを使用せずにそれを行う簡単な方法はありません。セルが固定されている場合はフロートを使用できますが、これは他の理由で問題があります。あなたがやっていることは退屈かもしれませんが、それは結構です。

OK、JavaScriptソリューションに興味がある場合は、jQuery（私の推奨するアプローチ）を使用して、次のかなり怖いコードを作成します。

<html>
<head>

<style type="text/css">
td.top { border-top: thin solid black; }
td.bottom { border-bottom: thin solid black; }
td.left { border-left: thin solid black; }
td.right { border-right: thin solid black; }
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
  box(2, 1, 2, 2);
});

function box(row, col, height, width) {
  if (typeof height == 'undefined') {
    height = 1;
  }
  if (typeof width == 'undefined') {
    width = 1;
  }
  $("table").each(function() {
    $("tr:nth-child(" + row + ")", this).children().slice(col - 1, col + width - 1).addClass("top");
    $("tr:nth-child(" + (row + height - 1) + ")", this).children().slice(col - 1, col + width - 1).addClass("bottom");
    $("tr", this).slice(row - 1, row + height - 1).each(function() {
      $(":nth-child(" + col + ")", this).addClass("left");
      $(":nth-child(" + (col + width - 1) + ")", this).addClass("right");
    });
  });
}
</script>
</head>
<body>

<table cellspacing="0">
  <tr>
    <td>no border</td>
    <td>no border here either</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td colspan="2">once again no borders</td>
  </tr>
</tfoot>
</table>
</html>

私はこれを行うためのより簡単な方法について喜んで提案します...

— クレタス
ソース
1
tdタグにクラスを追加しているようですか？静的に生成された、または最悪の場合は手動で生成されたサーバーサイドスクリプトでこれを実行できないのはなぜですか？JavaScriptの乱用のようです。
— トーマス
3
実際、ポスターはJavascriptソリューションを求めています。十分な情報がないため、Javascriptの乱用とは言えません。たとえば、ユーザーがクリックしたために境界線が追加されていますか？その場合、サーバーソリューションは正しくありません。
— cletus 2009年
情報不足でごめんなさい。これはサーバー側で生成されるので、クラスを手動で追加するだけでよいのは事実ですが、JSソリューションがより簡単なインターフェースを提供する方法が気に入っています。だから私はおそらくJSを使いませんが、それは見るのに良い解決策です。
— カイル・クロニン
-5

より簡単な方法は、テーブルをサーバー側のコントロールにすることです。次のようなものを使用できます。

Dim x As Integer
table1.Border = "1"

'Change the first 10 rows to have a black border
 For x = 1 To 10
     table1.Rows(x).BorderColor = "Black"
 Next

'Change the rest of the rows to white
 For x = 11 To 22
     table1.Rows(x).BorderColor = "White"
 Next
— カーティス
ソース
1
OPは、より簡単な方法を求めています
— 2013
2
注意してください、OPはHTML / CSSでそれを行う簡単な方法も求めています。彼の質問のどこにもVBまたはVBAキーワードはありません。ヘルプセクションをご覧になることをお勧めします：stackoverflow.com/help/how-to-answer Good Luck。
— ForceMagic 2013
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.