【问题标题】:setting width of a td element using CSS id使用 CSS id 设置 td 元素的宽度
【发布时间】: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

标签: html css html-table width column-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;自动换行:断词; }
猜你喜欢
  • 2014-06-07
  • 2018-01-03
  • 2012-09-19
  • 1970-01-01
  • 1970-01-01
  • 2013-12-30
  • 1970-01-01
  • 2016-11-04
  • 2021-10-15
相关资源
最近更新 更多