20

テーブルがあり、左側の列に行のインジケーターを追加したいと考えています。インジケータをレンダリングするためにスパンを使用していますが、スパンが全高を占めるようにすることはできません:

<table>
    <tr>
        <td style="padding:0px;"><span style="height:100%; width:5px; background-color:pink;">&nbsp;</span></td>
        <td>Some content</td>
        <td>Some more content</td>
    </tr>
</table>

テーブルには 15px のパディングがあるため、インジケーター col のパディングを削除し、スパンを高さ:100% に設定します。

td {padding:15px;}
table {background-color: yellow;}

このフィドルは、現在実行されていることを示しています。そのピンクのバーは、含まれている td の高さ全体にまたがる必要があります。

どうすればいいですか？スパンの代わりに td にスタイリングを設定できないことに注意してください。これは、レンダリングで他の問題が発生するためです (そうするとborder-bottom、th行のオフセットが発生します)。

4

9 に答える 9

18

スパンにoverflow:autoを追加する必要があります（もちろんdisplay:blockも）

<table>
   <tr>
      <td style="padding:0px;"><span style="height:100%; width:5px; background-color:pink;display:block;overflow:auto">&nbsp;</span></td>
      <td>Some content</td>
      <td>Some more content</td>
  </tr>
</table>
于 2013-06-06T11:39:07.800 に答える
3

そこは必要ありません<span>。必要なのは、右と左 paddingを 0 に設定して、色付きの行インジケーターの幅を 5 ピクセルにし、他のセルと同じように上下のパディングを 15 のままにして、背景色がセル/行の高さ全体をカバーするようにすることだけです。 .

HTML

  <table>
    <tr>
        <td class="rowindicator">&nbsp;</td>
        <td>Some content</td>
        <td>Some more content</td>
    </tr>
</table>

CSS

    table{background: yellow;}
    td{padding:15px;}
    .rowindicator{
         width:5px;                       
         padding-right:0px;  
         padding-left:0px;                       
         background-color:pink;
    }

デモ: http://jsfiddle.net/mNjsb/34/

于 2013-06-06T11:59:06.050 に答える
2

ここで何かが足りないのかもしれませんが、スパン要素を使用してセルの色を提供しているだけなら、セルの背景色をピンクに設定してみませんか?

<html>
<head>
<style>
td {padding:15px;}
table {background-color: yellow;}
</style>
</head>
<body>
<table>
    <tr>
        <td style="padding:0px;width:5px; background-color:pink">&nbsp;</td>
        <td>Some content</td>
        <td>Some more content</td>
    </tr>
</table>
</body>
</html>
于 2013-06-06T11:53:57.517 に答える
0

何らかの奇妙な理由で、表のセルにパディングを追加すると、100% の高さが「壊れる」原因になります。

これを回避するには、表のセルに「ダミーの高さ」を追加します。

td {padding:15px; height: 5px;}

これはもちろん、ブロック要素の使用に加えて:

<div style="height:100%; width:5px; background-color:pink;">&nbsp;</div>

ライブ テスト ケース。

于 2013-06-06T11:39:17.293 に答える
0

スパンはインライン要素であるため、高さを完全に取得するには、追加するdisplay: block;か、ブロックレベル要素を使用する必要があります<div>

于 2013-06-06T12:21:56.000 に答える
0 
span{
    display: inline-block;
    margin: 0;
}

これは機能します。

于 2015-05-27T22:55:09.143 に答える
0

あなたのしていることは正しくありません。特にそれらの要素が空の場合、スタイル設定のみを目的として要素を追加することはベスト プラクティスとは見なされません。最初の td を削除して、代わりにこれを行うことを検討してください。

td:first-child{
    border-left:4px solid pink
}

ここにjsfiddleがあります：http://jsfiddle.net/mNjsb/16/

編集：しかし、これを行うことを主張する場合、スパンはインライン要素です。つまり、追加する必要があります

display: inline-block

高さなどでスタイルを設定したい場合

于 2013-06-06T11:51:57.287 に答える