Tips on adjusting the width of an HTML table to prioritize a larger size for the last column over the first two

Question

Tips on adjusting the width of an HTML table to prioritize a larger size for the last column over the first two

Hello everyone, I am pretty new to Django, HTML, and CSS. This is actually my first time using stackoverflow so I could really use your assistance.

My issue involves a table I have created:

<div class="grade_book"><table class="table">
      <tr><th>Year</th><th>Grade</th><th>Category</th></tr>
   {% for year, grade, category in results %}
           <tr><td>{{year}}</td><td>{{grade}}</td><td>{{category}}</td></tr>        
   {% endfor %} 
        
    </table></div>

My goal is to set the first two columns' width to 100px and the third to last one to 250px.

I have attempted to achieve this with some CSS but it seems that only the first column's width gets set to 100 px.

  .grade_book table td {text-align: left;font-size: 14px;}

  .grade_book .table{ table-layout:fixed; font-size: 16px; width: 100%;  margin-bottom: 100px; border-collapse: collapse;}

  .grade_book th {  width: 90px;}

  .grade_book th+th {  width: auto;}

I would greatly appreciate any help you can provide as I am still learning about CSS. I have tried searching for similar questions but haven't been able to find the exact solution I'm looking for.

html css django

Answer 1

Answer №1

Check out the :nth-child() selector, it allows you to target specific items in order of appearance.

<html>
<head>
 <style>
  .grade_book table td {text-align: left;font-size: 14px;}

  .grade_book .table{ table-layout:fixed; font-size: 16px; margin-bottom: 100px; border-collapse: collapse;}

  .grade_book th {  width: 100px}
  .grade_book th:nth-child(3) {  width: 250px;}

 </style>
</head>
<body>
 <div class="grade_book">
  <table class="table">
   <tr><th>Year</th><th>Grade</th><th>Category</th></tr>
   <tr><td>2020</td><td>A</td><td>Science</td></tr>
   <tr><td>2020</td><td>B</td><td>History</td></tr>
   <tr><td>2020</td><td>F</td><td>Math</td></tr>
  </table>
 </div>
</body>
</html>

Don't forget to adjust the .table by removing the 100% width setting.

Answer 2

Check out the :nth-child() selector, it allows you to target specific items in order of appearance.

<html>
<head>
 <style>
  .grade_book table td {text-align: left;font-size: 14px;}

  .grade_book .table{ table-layout:fixed; font-size: 16px; margin-bottom: 100px; border-collapse: collapse;}

  .grade_book th {  width: 100px}
  .grade_book th:nth-child(3) {  width: 250px;}

 </style>
</head>
<body>
 <div class="grade_book">
  <table class="table">
   <tr><th>Year</th><th>Grade</th><th>Category</th></tr>
   <tr><td>2020</td><td>A</td><td>Science</td></tr>
   <tr><td>2020</td><td>B</td><td>History</td></tr>
   <tr><td>2020</td><td>F</td><td>Math</td></tr>
  </table>
 </div>
</body>
</html>

Don't forget to adjust the .table by removing the 100% width setting.

Answer 3

Answer №2

Considering that the header of your table is hand-crafted, you have the flexibility to modify it as follows:

<div class="grade_chart">
  <table class="chart_table">
    <tr><th width="100">Year</th><th>Grade</th><th width="250">Category</th></tr>
       {% for year, grade, category in data %}
         <tr><td>{{year}}</td><td>{{grade}}</td><td>{{category}}</td></tr>        
       {% endfor %}         
  </table>
</div>

By fixing the first and third columns, the second column will adjust accordingly. Subsequent rows will also adhere to this format. Make sure to eliminate all width CSS properties.

Answer 4

Considering that the header of your table is hand-crafted, you have the flexibility to modify it as follows:

<div class="grade_chart">
  <table class="chart_table">
    <tr><th width="100">Year</th><th>Grade</th><th width="250">Category</th></tr>
       {% for year, grade, category in data %}
         <tr><td>{{year}}</td><td>{{grade}}</td><td>{{category}}</td></tr>        
       {% endfor %}         
  </table>
</div>

By fixing the first and third columns, the second column will adjust accordingly. Subsequent rows will also adhere to this format. Make sure to eliminate all width CSS properties.

Answer 5

Answer №3

By utilizing the :last-child selector, I was able to make adjustments to the width of your .table class in order to ensure that the width is properly maintained.

I made the decision to eliminate the twig loop, however, the functionality should remain intact:

 .grade_book table td {text-align: left;font-size: 14px;}

  .grade_book .table{ table-layout:fixed; font-size: 16px; width: 450px;  margin-bottom: 100px; border-collapse;}

  .grade_book th {  width: 100px; padding: 0px;}

  .grade_book th:last-child {  width: 250px;}

<div class="grade_book"><table class="table">
      <tr><th>Year</th><th>Grade</th><th>Category</th></tr>
 
           <tr><td>{{year}}</td><td>{{grade}}</td><td>{{category}}</td></tr>        
        
    </table></div>

Answer 6

By utilizing the :last-child selector, I was able to make adjustments to the width of your .table class in order to ensure that the width is properly maintained.

I made the decision to eliminate the twig loop, however, the functionality should remain intact:

 .grade_book table td {text-align: left;font-size: 14px;}

  .grade_book .table{ table-layout:fixed; font-size: 16px; width: 450px;  margin-bottom: 100px; border-collapse;}

  .grade_book th {  width: 100px; padding: 0px;}

  .grade_book th:last-child {  width: 250px;}

<div class="grade_book"><table class="table">
      <tr><th>Year</th><th>Grade</th><th>Category</th></tr>
 
           <tr><td>{{year}}</td><td>{{grade}}</td><td>{{category}}</td></tr>        
        
    </table></div>

Tips on adjusting the width of an HTML table to prioritize a larger size for the last column over the first two

Answer №1

Answer №2

Answer №3

Similar questions

Homepage featuring a stacked image background similar to Kickstarter

Rejuvenate a just-launched window.open starting from the about:blank

My Perl script is displaying as a text file during testing and is not executing

Absence of Icon in PrimeFaces RowEditor

Modify the conditions of a CSS file in Bootstrap using JavaScript

Close button situated at the top-right corner overlapped by HTML/CSS styling

Error message: The color shade "100" is not in the color palette. The only available shades are primary, accent, and contrast

The visibility of a CSS class is rendered non-apparent when formed through the implementation

Utilize an API function when a button is clicked through Django URLs in Django/Python

Identifying when a system window covers an iframe

Is there a way to implement the onClick event within a styled component?

Leveraging the Power of jsPDF in Your Google Apps Scripts

conceal a targeted section from the bottom of the iframe

Troubleshooting Problem with Default Zoom Out on Iframe Images

The CSS display:block property isn't functioning as intended

JavaScript to resize images before uploading without displaying a preview

Having difficulty modifying CSS font classes

Is there a way to change the input type=file value?

The PHP tag is being terminated by the code within the query $db->

What is the best way to showcase application URLs consistently across the entire project?