web-dev-qa-db-ja.com

テーブル内の特定の行を囲む境界線？

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

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

.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>に上下を適用しようとしましたが、うまくいきませんでした。 （p.s.私はCSSが初めてなので、おそらく私が見逃した、これに対する本当に基本的な解決策があるでしょう。）

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

htmlcssbordercss-tables
118
Kyle Cronin

tr {outline: thin solid black;}はどうですか？ trまたはtbody要素で動作し、 表示 IE 8+を含むほとんどのブラウザーと互換性がありますが、以前はそうではありません。

111
enigment

応答してくれたすべてに感謝します！ここで紹介したすべてのソリューションを試してみましたが、インターネット上で他の可能なソリューションをさらに検索しましたが、有望なものを見つけたと思います。

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>

出力：

enter image description here

top、bottom、left、およびrightクラスをすべての<td>に追加する代わりに、top rowをトップの<tr>、bottom rowに追加するだけです下部の<tr>、およびrowをその間のすべての<tr>に追加します。このソリューションに問題はありますか？知っておくべきクロスプラットフォームの問題はありますか？

51
Kyle Cronin

親テーブルで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 output

35
Sunrise

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

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

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

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

8
Simon East

これを行う方法となる可能性のある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>
3
sipwiz

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

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

OK、jQueryを使用してJavascriptソリューションに興味がある場合（私の好みのアプローチ）、このかなり怖いコードの一部になります：

<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
cletus

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

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

<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>
1
sipwiz

トリックは アウトラインプロパティ のおかげです enigmentの答え 少し修正

このクラスを使用

.row-border{
    outline: thin solid black;
    outline-offset: -1px;
}

その後、HTML

<tr>....</tr>
<tr class="row-border">
    <td>...</td>
    <td>...</td>
</tr>

結果は enter image description here これがあなたの助けになることを願って

0
Basheer AL-MOMANI