猿问

CSS表格侧边框间距问题

我正在尝试学习一些 HTML 和 CSS 技能，但遇到一个问题，在网上找不到任何合适的解决方案。

我正在尝试在设计的表格两侧添加一些边框间距。请参阅附图以便更好地理解

当前表： https: //i.stack.imgur.com/Gj8tL.jpg

所需的表： https: //i.stack.imgur.com/UzmKO.jpg

我的代码：

<html dir="ltr">


<head>

    <meta charset="utf-8">

    <title>Deshe Email Monthly Update</title>


    <style>

        table {

            text-align: center;

            font-size: 10pt;

            height: 22px;

            border-radius: 10px;

            box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);

            bgcolor="#ffffff";

            font-family: calibri;

            color: #707070;

            width: 50%;

            border-collapse: collapse;




        }


        th, td{

            padding-top: 10px;

            padding-bottom: 10px;


        }


        tr {

            padding-top: 10px;

            padding-bottom: 10px;

            border: solid #1AAE9F;

            border-width: 1px 0;



        }


        tr:first-child {

            border-top: none;

        }


        tr:last-child {

            border-bottom: none;

        }



    </style>


</head>


<body>

    <table>

        <tr>

            <th>Symbol</th>

            <th>Position</th>

            <th>Return</th>

        </tr>

        <tr>

            <td>AAPL</td>

            <td>Short</td>

            <td>40.1%</td>

        </tr>

        <tr>

            <td>AAPL</td>

            <td>Short</td>

            <td>40.1%</td>

        </tr>

        <tr>

            <td>AAPL</td>

            <td>Short</td>

            <td>40.1%</td>

        </tr>

        <tr>

            <td>AAPL</td>

            <td>Short</td>

            <td>40.1%</td>

        </tr>

    </table>

    <br><br><br>



</body>

你们能帮我一个正确的解决方案吗？


至尊宝的传说
浏览 67回答 1
1回答

慕标5832272

希望这能解决您的问题将您的表格添加到div“然后应用”padding框中box-shadow( div)。table {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 10pt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 22px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: calibri;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #707070;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-collapse: collapse;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; th, td{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;padding-top: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;padding-bottom: 10px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; tr {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-bottom: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: solid #1AAE9F;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-width: 1px 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; tr:first-child {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-top: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; tr:last-child {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .table-box {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding:20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);&nbsp; &nbsp; &nbsp; &nbsp; }<html dir="ltr"><head>&nbsp; &nbsp; <meta charset="utf-8">&nbsp; &nbsp; <title>Deshe Email Monthly Update</title></head><body>&nbsp; &nbsp; <div class="table-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Symbol</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Position</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Return</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>AAPL</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Short</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>40.1%</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>AAPL</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Short</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>40.1%</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; </div></body></html>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答