установка ширины элемента td с использованием CSS id - PullRequest
0 голосов
/ 24 января 2020

Я разрабатываю приложение в Django.

Я пытаюсь установить ширину последнего столбца моей таблицы равной 10 пикселям.

Поэтому я попробовал оба варианта, включая style="width: 10 px" в элементе td и с использованием файла 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>

1 Ответ

2 голосов
/ 24 января 2020

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 }

ОБНОВЛЕНИЕ:
Как Брайан Эллиотт упомянул, что вам также нужно добавить фиксированный макет таблицы:

table { table-layout: fixed; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...