テーブル内の特定の行の周囲に境界線を付けますか?

https://stackoverflow.com/questions/670424

21-08-2019
|

質問

テーブル内の特定の行の周囲に境界線を配置できる 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> しかしうまくいきませんでした。（追記）私は CSS を初めて使用するので、見逃している本当に基本的な解決策があるかもしれません。)

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

解決

どのようにtr {outline: thin solid black;}は？ TRまたはTBODY要素の上に私の作品、そしてはにはIEを含め、ほとんどのブラウザと互換性があるように思わ8+しかし、前ではなくます。

他のヒント

回答してくださった皆様、ありがとうございました！ここで紹介した解決策をすべて試し、他の可能な解決策をインターネットでさらに検索した結果、有望な解決策を見つけたと思います。

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> その間。この解決策には何か問題がありますか?注意すべきクロスプラットフォームの問題はありますか?

を設定すると、 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

私は、あまりにもこれをやって遊んでました、これは私にとって最良の選択肢であるように見えます：

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

注細胞は、もはや他の行のものと整合しないであろうが、境界/カラーフォーマットがまだOK動作するように、これは、流体/自動列幅のの使用を防止します。溶液をを与えるTRであると指定された幅の（PX又は％のいずれか）。

のTDS あなたが唯一の特定の行に適用したい場合は、

もちろん、あなたは、セレクタtr.myClassを作ることができます。どうやらdisplay: tableはしかし、IE 6/7のために動作しませんが、他のハック（hasLayout？）それらのために働くかもしれないおそらくあります。： - （

ここでそれを行うための方法かもしれないのtbody要素を使用してのアプローチです。あなたは（ないTRにすることができますように同じ）のtbodyの境界線を設定することはできませんが、背景色を設定することができます。あなたがacheiveしたいしている効果は、これが動作する代わりに、境界線の行のグループの背景色を取得することができます。

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

グループの行は一緒に<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;
}

私はそれを行うに考えることができる唯一の他の方法は、あなたがネストされたテーブルの周りに境界線を必要とする行のそれぞれを囲むことです。それを行うのは、境界が容易になりますが、潜在的に他のレイアウトの問題をクリートになるには、手動で

などのテーブルセルの上に幅を設定する必要があります

あなたのアプローチはよくあなたの他のレイアウトrerquirementsに応じて、最適なものとすることができ、ここで提案のアプローチだけで可能な代替です。

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

あなたがそこにM×N個の細胞の任意のブロックの周囲に境界線を入れたいあなたの条件に基づき、実際にJavascriptを使用せずにそれを行うのがない簡単な方法です。あなたの細胞を用いて固定されている場合は、浮動小数点数を使用することができますが、これは他の理由で問題です。何をやっていることは面倒なことが、それは大丈夫ですがあります。

：あなたはjQueryの（私の好ましいアプローチ）を使用して、Javascriptのソリューションに興味があるなら、

[OK]を、あなたは、このコードのかなり怖い作品で終わります

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

私は喜んでこれを行うための簡単な方法の提案を取るよ...

トリックは<のhref = "httpsのおかげのアウトラインプロパティを使用することです：少しの変更でに答える//stackoverflow.com/a/16922733/4251431">enigment's

このクラスを使用します

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

その後、HTMLでの

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

と結果があります loading="lazy" 「ここに画像の説明を入力します」するこれはあなたが

役に立てば幸い

簡単な方法は、テーブルサーバ側制御することです。あなたはこれに似たものを使用することができます：

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

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow