読者です 読者をやめる 読者になる 読者になる

Ich lerne Ruby on Rails for Africa

Railsとアフリカとkintoneで苦戦するブログ

tableにborder-radiusは効く!しかし、box-shadowは丸まらない。

マジ、表題の通りです。

泣きそう。



頂いたデザインではねー

テーブルがあってね、可愛いんですよ、角丸な感じで。

しかもドロップシャドウをかけて良い感じになってるんですよ。



カワイイ、カワイイ。

          <table>
            <tr>
              <th>テースト</th>
              <td>1つ目</td>
              <td>2つ目</td>
              <td>3つ目</td>
            </tr>
            <tr>
              <th>下の段</th>
              <td>ポテチ</td>
              <td>アクエリ</td>
              <td>ポカリ</td>
            </tr>
          </table>

あ、テーブルだ。ってHTMLはこうするやん?

// 右下の丸め
table{
  box-shadow: 10px 10px 0 0 #fccccc;
}
tr:last-child{
  td:last-child{ 
    border-radius: 0 0 10px 0;
  }
}
// 以下略

まぁ、こうするわけですよ。

じゃあどうなる?



丸まらない!!一切丸まらない!!



そう、ここまで書いて気付いた。

理由は明確で丸めたのは、
ドロップシャドウをかけたtable本体ではなく
td要素だったから。



そうだよね、これだとtdとかthを丸めてるだけだし、
そこからドロップシャドウをかけてるわけではないので
そうなるよね。

辛い:;(∩´﹏`∩);:

疲れてるんだろうか・・・

寝よ。