CSS Space 左右为边界线

Question

在我的 table 中添加了分隔线。工作正常。但现在我想让线路到在左边和右边留下 space。我已经尝试过边框宽度，但它让我的边框比定义它的宽度更粗...

那么如何在文本保持原位的情况下为该行获取 space？

我的HTML:

<table class="layoutTable">
    <tr>
        <td>
            <table class="philosophyText">
                <tr>
                    <th class="header line">HEADER TEXT</th>
                </tr>
                <tr>
                    <td class="text_allground">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</tr>
            </table>

我的CSS:

#section2.section .half:last-child .philosophyText {
    width:100%;
    padding-left:18%;
    padding-right:18%;
}

#section2.section .half:last-child .philosophyText th {
    font-size: 20px;
    font-size: 2.3vh;
    padding-top:5.0vh;
    padding-bottom:0.5vh;
    font-weight:100;
}

#section2.section .half:last-child .philosophyText td {
    font-size: 18px;
    font-size: 1.75vh;
    padding-top:2.0vh;
    font-weight:300;
}

#section2.section .half:last-child .philosophyText .line {
    border-bottom: solid 1px white;
    }

我目前的 table 看起来像这样：

Answer 1

table tr td {
 padding: 0px 20px;   
}

但我建议不要为此使用 table。使用 div

Answer 2

试试这个：

.layoutTable { border-spacing: 5px; }

您可以使用 border-spacing（就像旧学校的 cellspacing 属性）在单元格之间添加间距。

我要说的一点是表格是用于表格数据的，它们永远不应该用于布局（除非编写电子邮件模板）

您还没有关闭 text_allground td

Answer 3

correct your table coding

<table class="layoutTable">
            <tr>
              <td><table class="philosophyText">
                  <tr>
                  <th class="header line"> HEADER TEXT </th>

                </tr>
                  <tr>
                  <td class="text_allground"> 

                      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                </td>
                </tr>
                </table>
                </td>
                </tr>
                </table>

CSS Space 左右为边界线

CSS Space left and right for border line

html

css

border

space