Question

我决定暂时删除该表并使用DIVS。（UPDATE）

这是我正在尝试的持续个人计划。我正在学习，因为我使用HTML和CSS。我想知道为什么无论我尝试做什么来创建表中每一行之间的空间它都不会改变。我试过边界间距...边界崩溃......填充但没有任何反应。

该表位于页面的左侧。

CSS：

tr.spaceUnder > td
    {
      margin-bottom: 5px;
      display: block
    }

    table {
        border-spacing: 10px;
        border-collapse: separate;

    }

    td {
        padding: 20px;
    }

/* Formating for left sidebar of information  */
    #sidebar {

    "background-color: #eee;
    height: 200px;
    width:350px;
    float:left;
    margin-top: 30px;
    margin-left: 30px;
    border: 1px solid black;
    border-radius: 5px;
    }

Html代码

<div id ="sidebar">

                <table style = "width:350px; height: auto;">
                <tr class = "spaceUnder">

                <td>
                <div><b> Things to take into account: </b></div>
                <div>
                <p>
                When creating a website, don't forget about structuring.
                If you can't get the objects to stop moving then your logic
                must be wrong.
                </p>
                </div>
                </td>
                </tr>

                <tr class = "spaceUnder">
                <div><b> Things to take into account: </b></div>
                <div>
                <p>
                When creating a website, don't forget about structuring.
                If you can't get the objects to stop moving then your logic
                must be wrong.
                </p>
                </div>
                </td>
                </tr>
                </table>

        </div> <!-- end sidebar -->

enter image description here

仅供参考 - 文本的中间容器应位于正确的容器之下。 - 这将是我的下一个问题，因为我一直试图解决这个问题几个小时。

Answer 1

这是答案，请尝试下面的css

tr.spaceUnder > td
    {
      margin-bottom: 5px;
      display: block
    }

    table {
        border-style: solid;
        border-spacing: 10px;
        border-collapse: separate;
        margin-top: 120px;

    }

    td {
        padding: 20px;
    }

/* Formating for left sidebar of information  */
    #sidebar {

    "background-color: #eee;
    height: 200px;
    width:350px;
    float:left;
    margin-top: 30px;
    margin-left: 30px;
    border: 1px solid black;
    border-radius: 5px;
    }

LIVE DEMO

您只需要添加border-style和margin-top来分隔两行

希望这种糖果是你的需要

CSS和HTML：填充，边框间距或边框折叠不能在桌面上工作

1 个答案: