Стол с рамкой и тенью вокруг - PullRequest
Новая
       51

Стол с рамкой и тенью вокруг

0 голосов
/ 07 июня 2018

Это код, который у меня есть на данный момент: http://jsfiddle.net/LRKXD/1941/

Я хочу, чтобы тень была вокруг всей таблицы, как мне это сделать?

Я хочу, чтобы граница былавыглядеть так:

shadow around

Обновление:

Уже я смог это сделать, вот мое решение: я завернул таблицув div и к этому div я добавил границу и тень вокруг.http://jsfiddle.net/LRKXD/2050/

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        body {
            background-color: rgba(136, 188, 200, 1);
        }

        table {
            margin-left: 0px;
            margin-rigth: 5px;
            margin-top: 0px;
            margin-bottom: 5px;
            width: 100%;
            heigth: 100%;
            border: 1px solid #333;
            padding: 0px;
            border-collapse: separate;
            border-spacing: 0;
            -moz-border-radius-topleft: 7px;
            -webkit-border-top-left-radius: 7px;
            border-top-left-radius: 7px;
            -moz-border-radius-topright: 7px;
            -webkit-border-top-right-radius: 7px;
            border-top-right-radius: 7px;
            -moz-border-radius-bottomleft: 7px;
            -webkit-border-bottom-left-radius: 7px;
            border-bottom-left-radius: 7px;
            -moz-border-radius-bottomright: 7px;
            -webkit-border-bottom-right-radius: 7px;
            border-bottom-right-radius: 7px;
        }

        td, th {
            text-align: center;
            vertical-align: middle;
            background-color: #fff;
            border: none;
            padding: 15px;
            font-weight: 500;
        }

        td + td, th + th {
            border-left: 1px solid #999;
        }

        th, tr td {
            border-bottom: 1px solid #999;
        }

        tfoot td {
            border-bottom: none;
        }

        td:first-child {
            border-left: none;
        }

        td:last-child {
            border-right: none;
        }

        thead + tr td, tr + tr td, tfoot td {
            border-top: none;
        }

        thead th:first-child {
            -moz-border-radius-topleft: 7px;
            -webkit-border-top-left-radius: 7px;
            border-top-left-radius: 7px;
            border-left: none;
        }

        thead th:last-child {
            -moz-border-radius-topright: 7px;
            -webkit-border-top-right-radius: 7px;
            border-top-right-radius: 7px;
            border-right: none;
        }

        tfoot td:first-child {
            -moz-border-radius-bottomleft: 7px;
            -webkit-border-bottom-left-radius: 7px;
            border-bottom-left-radius: 7px;
        }

        tfoot td:last-child {
            -moz-border-radius-bottomright: 7px;
            -webkit-border-bottom-right-radius: 7px;
            border-bottom-right-radius: 7px;
        }

        .pre-table {
            margin: 30px auto;
            width: 200px;
            padding-left: 0px;
            padding-right: 5px;
            padding-top: 0px;
            padding-bottom: 0px;
            box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.4), 0px 4px 20px rgba(0, 0, 0, 0.92);
            -moz-border-radius-topleft: 7px;
            -webkit-border-top-left-radius: 7px;
            border-top-left-radius: 7px;
            -moz-border-radius-topright: 7px;
            -webkit-border-top-right-radius: 7px;
            border-top-right-radius: 7px;
            -moz-border-radius-bottomleft: 7px;
            -webkit-border-bottom-left-radius: 7px;
            border-bottom-left-radius: 7px;
            -moz-border-radius-bottomright: 7px;
            -webkit-border-bottom-right-radius: 7px;
            border-bottom-right-radius: 7px;
        }
    </style>
</head>

<body>
<div class="pre-table">
    <table cellspacing="0" cellpadding="0">
        <thead>
        <tr>
            <th>1.1</th>
            <th>1.2</th>
            <th>1.3</th>
            <th>1.4</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
            <td>3.4</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3</td>
            <td>4.4</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>5.1</td>
            <td>5.2</td>
            <td>5.3</td>
            <td>5.4</td>
        </tr>
        </tfoot>
    </table>
</div>
</body>
</html>

Спасибо!

1 Ответ

0 голосов
/ 07 июня 2018

Добавьте это к вашему столу 

box-shadow: 0px 0px 36px 15px rgba(0, 0, 0, 0.28);


body {
  background-color: rgba(136, 178, 201, 1);
}

table {
  background-color: transparent;
  margin: 30px auto;
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: 0px 0px 36px 15px rgba(0, 0, 0, 0.28);
}

tr td {
  background-color: #fff;
  border: solid 1px #000;
  border-style: none solid solid none;
  padding: 20px;
}

tr:first-child td:first-child {
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-left-radius: 7px;
  border-top-left-radius: 7px;
  box-shadow: -5px -5px 0px 5px rgba(255, 255, 255, 0.4), 0px 4px 20px rgba(0, 0, 0, 0.92);
}

tr:first-child td:last-child {
  -moz-border-radius-topright: 7px;
  -webkit-border-top-right-radius: 7px;
  border-top-right-radius: 7px;
  box-shadow: 5px -5px -0px 5px rgba(255, 255, 255, 0.4), 0px 4px 20px rgba(0, 0, 0, 0.92);
}

tr:last-child td:first-child {
  -moz-border-radius-bottomleft: 7px;
  -webkit-border-bottom-left-radius: 7px;
  border-bottom-left-radius: 7px;
  box-shadow: -5px 5px 0px 5px rgba(255, 255, 255, 0.4), 0px 4px 20px rgba(0, 0, 0, 0.92);
}

tr:last-child td:last-child {
  -moz-border-radius-bottomright: 7px;
  -webkit-border-bottom-right-radius: 7px;
  border-bottom-right-radius: 7px;
  box-shadow: 5px 5px 0px 5px rgba(255, 255, 255, 0.4), 0px 4px 20px rgba(0, 0, 0, 0.92);
}

tr:first-child td {
  border-top-style: solid;
}

tr td:first-child {
  border-left-style: solid;
}
<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>
...