边界线的CSS左右空间答案

【问题标题】：CSS Space left and right for border line边界线的CSS左右空间
【发布时间】：2015-07-29 07:54:04
【问题描述】：

在我的表格中添加了分隔线。工作正常。但现在我想让这条线在左侧和右侧留出空间。我已经尝试过边框宽度，但它宁愿让我的边框比定义它的宽度更厚......

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

我的 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;
    }

我当前的表是这样的：

【问题讨论】：

你有一个HTML 标记错误...你应该关闭<td class="text_allground">

标签： html css border space

【解决方案1】：

试试这个：

.layoutTable { border-spacing: 5px; }

您可以使用border-spacing（如老派cellspacing 属性）在单元格之间添加间距。

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

你还没有关闭text_allgroundtd

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：