39

CSSボックス-テーブル行の影tr---ブラウザ間で一貫して機能していないようです。一部のブラウザでは、影が表示されます。他には、影はありません。

私は次のCSSを使用しています：

tr {
  background-color: rgb(165, 182, 229);
  box-shadow: 0px 2px 2px black;
  -moz-box-shadow: 0px 2px 2px black;
  -webkit-box-shadow: 0px 2px 2px black;
}
td, th {
  padding: 5px;
  text-align: left;
}

以下のスニペットのjsFiddleは次のとおりです。

tr {
  background-color: rgb(165, 182, 229);
  box-shadow: 0px 2px 2px black;
  -moz-box-shadow: 0px 2px 2px black, ;
  -webkit-box-shadow: 0px 2px 2px black;
}
td, th {
  padding: 5px;
  text-align: left;
}
<table>
  <tr>
    <td>&nbsp;</td>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <th>Title</th>
    <td>Three</td>
    <td>Four</td>
  </tr>
  <tr>
    <th>Title2</th>
    <td>Five</td>
    <td>Six</td>
  </tr>
  <tr>
    <th>Title3</th>
    <td>Seven</td>
    <td>Eight</td>
  </tr>
  <tr>
    <th>Title4</th>
    <td>Nine</td>
    <td>Ten</td>
  </tr>
</table>

注：を置き換えたり追加<tr>したりする場合も、同じ動作が見られます。<div>display: table-row

4

10 に答える 10

40

前述のように、プロパティは、またはプロパティbox-shadowを持つ要素でのみ機能します。display: blockdisplay:inline-block

display: block一般的なスタイルルールとしてテーブルセルに追加すると、セルが持っていた自動の幅/高さの比率display:tableが適用されなくなるため、テーブルセルは折りたたまれます。その動作をシミュレートするには、それぞれとにmin-width属性を割り当てるだけです。thtd

次にbox-shadow、行に適用します（ホバーまたはなし）。

要約すると、コードは次のようになります。

table { box-sizing: border-box; }
td, th { padding-left: 16px; min-width: 170px; text-align: left; }
tr { display: block; }
tr:hover { box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5); cursor: pointer; }

簡単にするためにベンダープレフィックスを省略しました。

完全な例は次のとおりです。

table {
  box-sizing: border-box;
  border-bottom: 1px solid #e8e8e8;
}
td,
th {
  padding-left: 16px;
  min-width: 170px;
  border: 1px solid #e8e8e8;
  border-bottom: none;
  font: 14px/40px;
  text-align: left;
}
td {
  color: #666;
}
tr {
  display: block;
}
th {
  color: #333;
}
tr:hover {
  background-color: #fbfbfb;
  box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
<table cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Phone number</th>
      <th>Date</th>
      <th>Name</th>
      <th>Label</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0342443</td>
      <td>10 August 2013</td>
      <td>Kate</td>
      <td>Loves cats</td>
      </td>
      <tr>
        <td>0342442</td>
        <td>9 August 2013</td>
        <td>Mary</td>
        <td>Boring</td>
      </tr>
      <tr>
        <td>0342441</td>
        <td>8 August 2013</td>
        <td>Anna</td>
        <td>Loves extreme stuff</td>
      </tr>
  </tbody>
</table>

こちらでフィドルをチェックすることもできます。

于 2013-07-12T07:48:22.367 に答える
39

ボックスシャドウでtransformscale （1,1）プロパティを使用すると、問題が解決します。

tr:hover {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

フィドル：https ：//jsfiddle.net/ampicx/5p91xr48/

ありがとう！！

于 2017-12-27T12:37:59.897 に答える
9

修正されるのを確認したい場合は、このバグにスターを付けてください。

https://code.google.com/p/chromium/issues/detail?id=94871

テーブルのセル幅を引き続き自動的に調整する場合は、代わりに個々のセルに影を付けることができます。

td:first-child {
  box-shadow:
    inset 0px 11px 8px -10px blue,
    inset 0px -11px 8px -10px blue,
    inset 11px 0px 8px -10px blue; 
}
td {
  box-shadow:
    inset 0px 11px 8px -10px blue,
    inset 0px -11px 8px -10px blue;
}
td:last-child {
  box-shadow:
    inset 0px 11px 8px -10px blue,
    inset 0px -11px 8px -10px blue,
    inset -11px 0px 8px -10px blue; 
}

ここに完全な例があります。（jsfiddle）

（ https://stackoverflow.com/a/10150898/724752に触発されました）

各ボックスのシャドウ値：

  • 3番目の数値（ぼかし半径）を調整して、ぼかし半径を変更します。
  • 4番目の数値（広がり半径）は常に負である必要があり、その絶対値は3番目の数値（ぼかし半径）よりも大きくなければなりません。
  • 最初の数値（オフセットx）をゼロ以外にして、左または右に影を付けます。その絶対値1を4番目の数値の絶対値よりも大きくします（上記の例をもう一度参照してください。私が何を意味するのかがはるかにわかりやすくなっています）。
  • 2番目の数値（オフセットy）をゼロ以外にして、上部または下部に影を付けます。その絶対値1を4番目の数値の絶対値より大きくします。
于 2015-04-01T17:26:05.413 に答える
6

私も同じ問題を抱えていました。マウスがその上にあるときに、行全体を強調表示しようとしていました。以下はそのcssコードです：

tr:hover {
    outline: none;
    -webkit-box-shadow: inset 0 0 10px #337AB7;
    box-shadow: inset 0 0 10px #337AB7;
}

これは、Mozilla Firefox（38.0.1）とInternet Explorer（11.0.9600.17801）の両方でWindows 7で正常に動作します。ただし、Chrome（43.0.2357.81）では動作しませんでした。

したがって、回避策を講じる必要があり、SviatoslavZalishchukとDavidWinieckiの回答を組み合わせて実行しました。その結果、私は次のようになりました。

@media screen and (-webkit-min-device-pixel-ratio:0) {
    tr:hover td:first-child {
       box-shadow: inset 0px 11px 8px -10px #337AB7, 
                   inset 0px -11px 8px -10px #337AB7, 
                   inset 11px 0px 8px -10px #337AB7;
    }

    tr:hover td {
       box-shadow: inset 0px 11px 8px -10px #337AB7, 
                   inset 0px -11px 8px -10px #337AB7;
    }

    tr:hover td:last-child {
       box-shadow: inset 0px 11px 8px -10px #337AB7, 
                   inset 0px -11px 8px -10px #337AB7, 
                   inset -11px 0px 8px -10px #337AB7;
    }
}

tbody > tr:hover {
    outline: none;
    -webkit-box-shadow: inset 0 0 10px #337AB7;
    box-shadow: inset 0 0 10px #337AB7;
}

これは正常に機能し、テーブルの列幅を壊すことはなく、MozillaとExplorerでも機能します。

以下に完全な例があります。

table {
  box-sizing: border-box;
  border-collapse: collapse;
}
td,
th {
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #dddddd;
  font: 14px;
  text-align: left;
}

/*To work only on Chrome and Safari*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
  tr:hover td:first-child {
    box-shadow: inset 0px 11px 8px -10px #337AB7, 
      inset 0px -11px 8px -10px #337AB7, 
      inset 11px 0px 8px -10px #337AB7;
  }

  tr:hover td {
    box-shadow: inset 0px 11px 8px -10px #337AB7, 
      inset 0px -11px 8px -10px #337AB7;
  }

  tr:hover td:last-child {
    box-shadow: inset 0px 11px 8px -10px #337AB7, 
      inset 0px -11px 8px -10px #337AB7, 
      inset -11px 0px 8px -10px #337AB7;
  }
}

/*To work on the others browsers*/
tbody > tr:hover {
  outline: none;
  -webkit-box-shadow: inset 0 0 10px #337AB7;
  box-shadow: inset 0 0 10px #337AB7;
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Born</th>
      <th>City</th>      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>David Gilmour</td>
      <td>6 March 1946</td>
      <td>Cambridge, England</td> 
	</tr>
    <tr>
      <td>Roger Waters</td>
      <td>6 September 1943</td>
      <td>Surrey, England</td>		
    </tr>
    <tr>
      <td>Nick Mason</td>
      <td>27 January 1944</td>
      <td>Birmingham, England</td>
    </tr>
    <tr>
      <td>Richard Wright</td>
      <td>28 July 1943</td>
      <td>London, England</td>
    </tr>
  </tbody>
</table>

于 2015-06-08T13:01:06.363 に答える
3

その背後にある理由はデフォルトのCSSにあるようです-これdisplay: blockが最大の要因でした。

CSS /HTML/デモ

tr {
  background-color: rgb(165, 182, 229);
  display: block;
  margin-bottom: 5px;
  -moz-box-shadow: 0px 2px 2px black;
  -webkit-box-shadow: 0px 2px 2px black;
  box-shadow: 0px 2px 2px black;
}
td,th {
  padding: 5px;
  text-align: left;
}
<table>
  <tr>
    <td>&nbsp;</td>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <th>Title</th>
    <td>Three</td>
    <td>Four</td>
  </tr>
  <tr>
    <th>Title2</th>
    <td>Five</td>
    <td>Six</td>
  </tr>
  <tr>
    <th>Title3</th>
    <td>Seven</td>
    <td>Eight</td>
  </tr>
  <tr>
    <th>Title4</th>
    <td>Nine</td>
    <td>Ten</td>
  </tr>
</table>

于 2012-06-04T00:30:39.987 に答える
3

box-shadowとを使用するのfilterと非常によく似た効果がありdrop-shadowます。少しハッキーですが、シナリオに一致するシャドウの最適な構成を見つける必要があります。

私の元のクラス：

.project-row { 
   box-shadow: 0 0 15px 0 black;
}

私の新しいクラス：

.project-row { 
   filter: drop-shadow(0 0 9px black);
}

https://codepen.io/nico_nj/pen/XWbaZPJ

于 2020-03-03T17:56:58.097 に答える
2

現在、v53 Chromeでは修正され、ボックスシャドウは正常に機能し<tr></tr>ます。

CSS /HTML/デモ

table {
  border-spacing: 0 10px;
  border-collapse: separate;
} 
tbody {
  display: table-row-group;
  vertical-align: middle;
}
tr {
  margin-bottom: 9px;
}
tr:hover {
      box-shadow: 0 5px 8px 0 rgba(50, 50, 50, 0.35);
    -webkit-box-shadow: 0 5px 8px 0 rgba(50, 50, 50, 0.35);
    -moz-box-shadow: 0 5px 8px 0 rgba(50, 50, 50, 0.35);
}
<table class="table">
  <caption>Optional table caption.</caption>
  <thead> 
    <tr> 
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr> 
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

于 2016-09-07T05:56:42.623 に答える
0

ホバーしたときに列の左側にボックスシャドウが必要でした。

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

行の最初のセルにボックスシャドウを設定するだけで修正しました。このような：

tr:hover                { background: #EEF0F3; cursor: pointer; }
tr:hover td:first-child { box-shadow: inset 2px 0 0 0 #323335; }

Firefox、Chrome、IE9で試しました。正常に動作しているようです。

行全体の周りに1pxの幅の境界線が必要な場合は、次のようにすることができます。

tr:hover td             { box-shadow: 0 1px 0 0 black, 0 -1px 0 0 black; }
tr:hover td:first-child { box-shadow: 0 -1px 0 0 black, -1px 0 0 0 black, 0 1px 0 0 black; }
tr:hover td:last-child  { box-shadow: 0 -1px 0 0 black, 1px 0 0 0 black, 0 1px 0 0 black; }

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

于 2016-10-04T13:57:09.377 に答える
0

:afterテーブル行の疑似要素を使用して、全体trの上に表示し、のホバーをpointer events: none;適用することができます。box-shadowtr

例：

.custom-table {
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
table {
  margin-bottom: 0;
  color: #4e4e4e;
}

thead {
  background: #000000;
  color: #FFFFFF;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
}
th {
  padding: 20px 40px;
}
tr:hover:after {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}

tbody tr {
  background: #FFFFFF;
  position: relative;
}
tbody tr:after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  pointer-events: none;
  top: 0;
  left: 0;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0);
  transition: box-shadow 0.3s ease-in-out;
}
td {
  padding: 17px 40px;
  border: 0;
  vertical-align: middle;
}
<div class="custom-table table-responsive">
    <table class="table">
        <thead class="table-header">
            <tr class="table-row">
                <th scope="col" class="table-col">Date &amp; Time</th>
                <th scope="col" class="table-col">Meeting Name</th>
                <th scope="col" class="table-col">Document</th>
                <th scope="col" class="table-col">Type of Meeting</th>
            </tr>
        </thead>
        <tbody class="table-body">
            <tr class="table-row">
                <td class="table-col"><span class="meeting-date">16 Nov 2021 <b>Saturday</b></span><span class="meeting-time">7:00 PM</span></td>
                <td class="table-col">Lorem ipsum dolor sit amet</td>
                <td class="table-col"><span class="member-document">quis nostrud exercitation ullamco</span></td>
                <td class="table-col"><span class="meeting-type type-1">MEETINGS</span></td>
            </tr>
            <tr class="table-row">
                <td class="table-col"><span class="meeting-date">16 Nov 2021 <b>Saturday</b></span><span class="meeting-time">7:00 PM</span></td>
                <td class="table-col">Lorem ipsum dolor sit amet</td>
                <td class="table-col"><span class="member-document">quis nostrud exercitation ullamco</span></td>
                <td class="table-col"><span class="meeting-type type-1">MEETINGS</span></td>
            </tr>
            <tr class="table-row">
                <td class="table-col"><span class="meeting-date">16 Nov 2021 <b>Saturday</b></span><span class="meeting-time">7:00 PM</span></td>
                <td class="table-col">Lorem ipsum dolor sit amet</td>
                <td class="table-col"><span class="member-document">quis nostrud exercitation ullamco</span></td>
                <td class="table-col"><span class="meeting-type type-1">MEETINGS</span></td>
            </tr>
        </tbody>
    </table>
</div>

于 2022-01-20T09:10:16.433 に答える
-1

反応して、私は以下のように答えを組み合わせました。クローム、> firefox、ie11で正常に動作しました

.select_row{
    color: #43B149;
    font-weight: bolder !important;
    background: #e4e5e6 !important;
    box-shadow: 1px 0px 1px 0px #cad6ce !important;
    -moz-box-shadow:1px 0px 1px 0px #cad6ce !important;
    -webkit-box-shadow:1px 0px 1px 0px #cad6ce !important;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    td{box-shadow: 0px 3px 0px 0px #cad6ce !important;
        -moz-box-shadow:0px 3px 0px 0px #cad6ce !important;
        -webkit-box-shadow:0px 3px 0px 0px #cad6ce !important;
        background: #e4e5e6 !important;
    }
}
.table-forecast{
    border-collapse: separate;
    border-spacing: 0px;
}
于 2018-11-22T08:49:22.077 に答える