修复表格 td 宽度答案

【问题标题】：fix the table td width修复表格 td 宽度
【发布时间】：2014-01-01 00:33:16
【问题描述】：

我想像上表那样设计

我是这样实现的。请查看我的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 内容提供相等的间距和一些固定的宽度。

【问题讨论】：

标签： html css

【解决方案1】：

试试这个

将 css 设置为 table td 标签。

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

或创建类并设置名称。

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

【讨论】：

我想将文本换行更长的长度而不是隐藏状态。

【解决方案2】：

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 插入一个固定宽度。其他人只是复制有宽度的人。您可以在其列的函数中为每个单元格添加一个类。您也可以以 % 为单位插入宽度，因此如果您有较大的分辨率，您的显示将会增加。

【讨论】：

这和上面的设计不太一样。我需要像我在我的问题中粘贴布局的设计

【解决方案3】：

您可以使用<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。

【讨论】：

【解决方案4】：

Take a look at this.

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

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

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

【讨论】：

当我将宽度增加到 500 像素时，我只是使用它，文本没有出现。它只停留在那里。宽度有什么用？jsfiddle.net/Pv3Zk/487
这取决于表格的整体宽度，如果您希望它正好 500px，请设置最小宽度 - jsfiddle.net/Pv3Zk/488

【解决方案5】：

这里的问题是表格从不强制 td 使用指定的宽度，直到你使用

table { table-layout: fixed; }

并用

制作第一行表格

td { height: 0; }

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

按照标准，您也可以使用

，但在某些浏览器中这不起作用，td 可以在任何地方使用。

这种问题在不同的地方被问过很多次，e.g. here

【讨论】：

【解决方案6】：

只需添加你的 CSS

#cssTable td
{
 padding:0 20px;
}

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

【讨论】：

【解决方案7】：

如果您想以不同的方式分隔每个 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。

【讨论】：