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

Posted 2023-03-05

【中文标题】使用 CSS id 设置 td 元素的宽度

【英文标题】：setting width of a td element using CSS id

【发布时间】：2020-05-10 23:44:10

【问题描述】：

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

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

所以我尝试通过在td 元素中包含style="width: 10 px" 和使用一个CSS 文件来定位id 属性给td 元素。

这是我的 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>

【问题讨论】：

您可能需要将表格设置为：table-layout:fixed;，然后将td的宽度设置为10px。

我尝试添加 table table-layout: fixed; 在我的 CSS 文件中，但它不起作用。

@Tms91 因为表应该已经定义了width

【参考方案1】：

table 
  table-layout: fixed;
  width: 400px;
  border-collapse: collapse;


table tr td 
  border: 1px solid;


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

<table>

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

    <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 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; 

【讨论】：

解决方案就是在 CSS 表格中添加 table-layout: fixed;宽度：400px； 然后 #url_cell 宽度：10px;自动换行：断词；