使用CSS ID设置td元素的宽度

Question

我正在用Django开发应用程序。

我正在尝试将表格的最后一列的宽度设置为等于10像素。

因此，我都尝试通过在style="width: 10 px"元素中包含td和使用以提供给id元素的td属性为目标的CSS文件。

这是我的CSS文件内容（我敢肯定，它确实适合我的模板：]

#url_cell{
  width: 10px;
}

这是我的模板：

<table>

    <tr style="font-weight: bold; text-align: center;width:100px">

        <td class="class_Tabella_Head">Lemma</td>
        <td class="class_Tabella_Head">Acronimo</td>
        <td class="class_Tabella_Head">Definizione</td>
        <td class="class_Tabella_Head">Titolo documento fonte</td>
        <td id="url_cell" style="width: 10 px" class="class_Tabella_Head">URL documento fonte</td>

    </tr>

{% for row in queryresult_key %}

    <tr>        

        <td class="class_Tabella_Risultati">{{ row.0 }}</td>
        <td class="class_Tabella_Risultati">{{ row.1 }}</td>
        <td class="class_Tabella_Risultati">{{ row.2 }}</td>
        <td class="class_Tabella_Risultati">{{ row.3 }}</td>
        <td id="url_cell" style="width: 10 px" class="class_Tabella_Risultati">{{ row.4 }}</td>

    </tr>

{% endfor %}

</table>

Answer 1

table {
  table-layout: fixed;
  width: 400px;
}

table tr td:last-child {
  width: 10px;
  background-color: red;
}

<table>

  <tr style="font-weight: bold; text-align: center;width:100px">

    <td class="class_Tabella_Head">Lemma</td>
    <td class="class_Tabella_Head">Acronimo</td>
    <td class="class_Tabella_Head">Definizione</td>
    <td class="class_Tabella_Head">Titolo documento fonte</td>
    <td id="url_cell" style="width: 10 px" class="class_Tabella_Head">URL documento fonte</td>

  </tr>


</table>

您可以使用:last-child选择器访问列表中的最后一个元素：

table tr td:last-child { width: 10px }

更新：正如布莱恩·埃利奥特（Bryan Elliott）所述，您还需要向表格添加固定的布局：

table { table-layout: fixed; }