Configuring table column sizes in Django

In my Django app, I needed to display a model's objects. To achieve this, I implemented an inclusion tag that generates a table of data to be displayed in the template. Below is the code for my custom inclusion tag:

*dir_extras.py*
@register.inclusion_tag('app_name/model_data.html')
def field_data(field):
    data_list = Attributes.objects.values_list(field, flat=True)    
    return {'data_list':data_list}

The inclusion tag 'field_data' retrieves a list of field objects for the model class 'Attributes'. The corresponding template for rendering this tag looks like this:

*model_data.html*
{% load dir_extras %}
<table> 
{% for data in data_list %}
    <tr>
        <td> {{data}} </td>
    </tr>
{% endfor %}
</table>

Next, in the template 'list.html', I call and display all the data from 'Attributes' using the 'field_data' tag:

*list.html*
<table>
<tr>
    {% for field in fields %}
        <th>{{ field.verbose_name }}</th>
    {% endfor %}
    </tr>   
    <tr>
        {% for f_name in field_names %}
                <td> {% field_data f_name %} </td>
        {% endfor %}    
    </tr>   
 </table>

Despite having aligned table columns, there seems to be an issue with row formatting. Some elements are not properly aligned with each other, causing the first element to span across multiple rows. You can view a screenshot of the template here.

It's uncertain whether the formatting discrepancy is caused by the inclusion tag or another issue. Is there a way to resolve this alignment problem?

Answer №1

You have the ability to enhance your HTML table design by using CSS. With CSS, you can specify which columns should expand automatically and set column widths in either percentages or pixels.

Assign CSS classes to your <th> and <td>:

<table class="my-listing">
<tr>
    {% for field in fields %}
        <th class="column-{{ field.verbose_name|slugify }}">{{ field.verbose_name }}</th>
    {% endfor %}
    </tr>   
    <tr>
        {% for f_name in field_names %}
                <td class="column-{{ f_name|slugify }}"> {% field_data f_name %} </td>
        {% endfor %}    
    </tr>   
 </table>

Control the column expansion using CSS:

 /* Default width of the column */
 .my-listing td,
 .my-listing th {
      width: 10%;
 }

 /* Width of one specific column */
 .column-id {
       width: 10%;
 }     

Read up on Django documentation for including static assets like CSS with your app.

Explore ways to style tables with CSS.

Experiment with modifying CSS styles using web browser debugging tools such as Firebug to find optimal values.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Showing a series of text entries one after the other, each appearing with a smooth fade-in and fade-out

I am eager to showcase a list of text in a sequential order, implementing a fade-in/fade-out effect and concluding with the display of an image. Additionally, I aim to have all the text centered on the page. <div>a<div> <div>b</div> ...

What is the proper way to position my unique dot beside my custom numeral in a ordered sequence?

When creating an ordered list in HTML, I encountered a challenge. I wanted to display the numbers in a different color from the text and also add a dot next to each number. After some trial and error with CSS styling, I was able to achieve this effect suc ...

Looking to list objects with a many-to-many relationship on Django? Take for example, users and their follows

I am in the process of creating a microblogging platform similar to Twitter. My goal is to display posts from users that the currently authenticated user is following. Data Models: class Post(models.Model): post = models.TextField(max_length=300) ...

Encountering an issue during the deployment of a Django application on Heroku with a PostgreSQL database. The error message states that the DATABASES configuration

Hello everyone, I am currently navigating the world of deploying my Django app on Heroku. Unfortunately, I have encountered an issue when trying to connect to my PostgreSQL database. While the database functions smoothly in my local environment, the proble ...

Using Django's Object Relational Mapping (ORM) to apply conditional

Within my Django application, I am storing daily user scores in a model structured as follows: class Score(models.Model): user = models.ForeignKey(User) score = models.PositiveIntegerField(default=0) date = models.DateField(auto_now_add=True) ...

HTML Alignment of Body and Div Elements

Setting the body and div to have the same height and width in my CSS: body { background-repeat: no-repeat; background-color: maroon; width: 1280px; height: 670px; margin: 0; } div { background-color: yellow; width: 1280px; height: 670px; } And here i ...

Navigation website with a twist

My design features a main navigation that is rotated 90 degrees, while the sub-menu remains horizontally aligned. <div id="nav"> <ul> <li><a href="#">Woonaccessoires</a></li> ...

Improved efficiency in CSS for left transition animations

Here is the current code I am using: .s2 { top: 150px; left: 20px; position: absolute; transition: left 300ms linear; } I am currently updating the left position dynamically using JavaScript based on scroll events. However, I have noticed that th ...

When used, the jQuery selector returns the PreviousObject rather than the object that was selected initially

I'm currently attempting to add a second menu to my website alongside the top menu. I have multiple menus set up in two bootstrap columns (col-8 and col-4). Initially, when I used jQuery selectors outside of a function, everything worked smoothly. How ...

Is the table not displaying properly in the print preview with a messy

I have a large table with multiple rows. Due to its length, I have provided a link to the jsfiddle where you can view it: jsfiddle. The table is structured in HTML and contains many rows with various attributes. <table> <thead>text here!</t ...

positioned absolutely with a margin of 0 auto

Struggling to find a way to center the text in the wrapper? I have a responsive slideshow that requires text to be on top of it and centered. ul.bjqs { position:relative; list-style:none; padding:0; margin:0; z-index: 1; overflow ...

Utilizing jQuery to Toggle Visibility of Table Rows on Button Click

I have a unique layout on my page where there are two tables positioned side by side. The table on the left consists of buttons with company names, and the table on the right should display employees associated with each specific company. Upon initially l ...

CSS animations failing to transition properly in Firefox

It seems that despite following all the necessary steps in my CSS, I am facing an issue with a transition not working properly in Firefox. The bounce-in effect I have implemented is failing to function as expected in this browser, even though Firefox does ...

Can you show me how to use Yahoo UI (JS) to simulate a click on a specific point (x, y) within an

Can someone help me with simulating a mouse down at point (X, Y) in the client area of an HTML Object using YUI? I checked the documentation here, but I'm still unclear on how to do it. ...

What steps can be taken to adjust the alignment of a Bootstrap Dropright menu so that it opens in an upward direction instead of the standard downward

My dropdown menu is dropping towards the right correctly, but it is going downwards and getting hidden under my page. I want it to open upwards instead of downwards. I attempted to adjust the CSS, adding bottom:0 to the dropdown-menu, but unfortunately, i ...

Using Jquery to create a fading effect when changing the color by checking a checkbox

I'm struggling with adding a fading effect to change the background color of the body element when a checkbox is checked. The color changes successfully, but I can't figure out how to make it fade smoothly. Here is the HTML code: <div class=& ...

Ensuring Raven Sends Django Runscript Exceptions to Sentry: A Step-by-Step Guide

I have a Django web app that uses raven to log exceptions to Sentry. In addition, I have several scripts that run as cron jobs using manage.py runscript. However, I have noticed that exceptions from these scripts are not being sent to Sentry. Is there a ...

What could be the reason for v-model not functioning properly within vue.extend?

I've configured a page structure similar to the following: <main id="app"> <div id="mount-place"></div> </main> <script type="text/x-template" id="my-template"> ...some code her ...

Efficiently saving multiple objects at once: updating and creating with hierarchical relationships

I am facing an issue with creating objects from JSON while simultaneously validating it. My goal is to avoid inserting or updating these objects in the database if the JSON format is incorrect or contains unacceptable numbers (in arrays). Instead, I want t ...

Is there a way to stop Chrome from creating an endless loop while showing alerts during the focus event, without having to disable and enable the event repeatedly?

Looking for a solution to prevent an infinite loop of alert messages in Google Chrome when clicking on cmbMonkeys. The workaround for cmbPeople is working fine, but I'm curious if there's another way to handle alerts on focus or blur events with ...