Question

enter image description here

我想设计如上表

我已经像这样实施了。请查看我的JSFiddle。

HTML：

<table border="0" id="cssTable">
    <tr>
        <td>eredgb</td>
        <td><a href="self">04-Milwaukee</a></td>
        <td>705</td>
        <td>sdfdfdfed</td>
        <td>298</td>
    </tr>
    <tr>
        <td>sdfsdfsdfsdfsdf</td>
        <td><a href="self">04-Milwaukee</a></td>
        <td>705</td>
        <td>content2</td>
        <td>298</td>
    </tr>
    <tr>
        <td>sdfsdfsdfsdfsdf</td>
        <td><a href="self">04-Milwaukee edh walkohnykuohbnbd</a></td>
        <td>705</td>
        <td>content1</td>
        <td>298</td>
    </tr>
</table>

CSS：

#cssTable{
    margin-left:20px;
}

我怎样才能像上面的截图一样制作这个？我需要为每个表td内容提供相等的间距和一些固定的宽度。

Answer 1

Take a look at this

您可以使用css选择器:nth-child()来定位特定列。

#cssTable td {
    padding: 5px 15px;
}

#cssTable td:nth-child(2) {
    width: 100px;
}

Answer 2

如果你想以不同方式分隔每个td，你可以使用nth-child选择器：

#cssTable{margin-left:20px;}  
#cssTable tr td:nth-child(1){width: 100px; padding-right: 10px;}
#cssTable tr td:nth-child(2){width: 300px; padding-right: 10px;}
#cssTable tr td:nth-child(3){width: 50px; padding-right: 10px;}
#cssTable tr td:nth-child(4){width: 100px; padding-right: 10px;}
#cssTable tr td:nth-child(5){width: 50px;}

http://jsfiddle.net/mLpH9/2/

如果你的表变大，你当然可以为所有列设置padding-right并将last-child设置为0。

Answer 3

试试这个

将css设置为表td标记。

table td {
    width: 60px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

或创建类并设置名称。

<td class="special_column">...</td>

Answer 4

Like this ?（受@Grey代码启发更新）

#cssTable td {
    padding: 0px 10px;
}

#cssTable a {
    color:red;
}

#cssTable td:nth-child(1) {
    width:20px;
}
#cssTable td:nth-child(2) {
    width:200px;
}
#cssTable td:nth-child(3),#cssTable td:nth-child(5) {
    width:30px;
    font-weight:bold;
}
#cssTable td:nth-child(4) {
    width:20px;
}

您需要为一行的每个td插入一个固定宽度。其他人只是复制那些有宽度的人。您可以在其列的功能中为每个单元格添加一个类。您也可以以％为单位插入宽度，这样如果您的分辨率很高，您的显示将会增加。

Answer 5

您可以使用<colgroup>和<col>。你不需要以这种方式给每个<td>一个单独的类。

<table border="0" id="cssTable">
    <colgroup>
        <col width="100px" />
        <col width="100px" />
        <col width="50px" />
        <col width="75px" />
        <col width="50px" />
    </colgroup>
    <tr>
        ...

同时检查updated Fiddle。

Answer 6

这里的问题是，在使用

之前，表永远不会强制td使用指定的宽度

table { table-layout: fixed; }

并使用

创建第一行表

td { height: 0; }

并指定此行中每个td的宽度。

按标准，你也可以使用＆lt; col＆gt;但是在某些浏览器中这不起作用，td无处不在。

在不同的地方，e.g. here

会多次询问此类问题

Answer 7

只需添加你的CSS

#cssTable td
{
 padding:0 20px;
}

它会向左右添加填充。 http://jsfiddle.net/Pv3Zk/484/

修复表td宽度

7 个答案: