124

テーブル内の特定の行の周りに境界線を配置できる 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>

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

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

4

10 に答える 10

118

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

于 2013-06-04T16:16:04.867 に答える
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クラスを everyに追加する代わりに、 top 、bottom 、およびその間のeveryに<td>追加するだけです。このソリューションに問題はありますか? 知っておくべきクロスプラットフォームの問題はありますか?top row<tr>bottom row<tr>row<tr>

于 2009-03-22T04:55:32.013 に答える
9

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

<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?) で機能する可能性があります。:-(

于 2012-01-09T05:20:39.897 に答える
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>
于 2009-03-22T03:16:56.960 に答える
1

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

わかりました。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>

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

于 2009-03-22T02:32:16.303 に答える
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>
于 2009-03-22T02:35:24.487 に答える