Question

在我的表格中添加了分隔线。工作良好。但是现在我想让这条线路来在左侧和右侧留出空间。我已经尝试了边框宽度，但它确实使我的边框比定义宽度更厚......

那么当文字保留在原位时，如何为该线留出空间呢？

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

我目前的表格如下：

Answer 1

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

但我建议不要使用表格。使用divs

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空间左右边界线

3 个答案: