使用Css和HTML缩进表列

Question

我使用HTML创建了一个表格，但列标题彼此距离太近，因此我想使用css将它们分开。

在我的HTML中，我创建了一个包含这样的标题的表：

<table class="DataTable">

        <thead>
            <tr>

                <th>School</th>
                <th>First Namer</th>
                <th>Last Name</th>
                <th>Sport</th>
                <th>Enrollment Date</th>
            </tr>
        </thead>


    </table>

并在我的Css文件中：

table.DataTable {

    border: 1px solid #79bbff;
//nothing much here , but how do I space out the headers?

}

谢谢

Answer 1

如果是您希望稍微分开的文字，可以使用padding：

table.DataTable th {
    padding: 4px 8px;
}

值4px 8px会将顶部和底部填充设置为4px，将左右填充设置为8px。

JSFiddle demo

这相当于使用：

table.DataTable th {
    padding-top: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 4px;
}

Answer 2

最好的办法是添加以下CSS规则：

table.DataTable th {
    padding-left: 5px;
    padding-right: 5px;
}

根据您的喜好调整填充像素大小。

Answer 3

这里需要padding。

http://jsfiddle.net/uuQ64/

th {
 padding:10px;
}

您可以使用此属性为不同的边指定不同的填充。 在该链接中查找更多内容。

Answer 4

table.DataTable th {
    padding-left: 4px;
    padding-right: 8px;
}

你可以调整外观。