HTML: Creating a Table with Variable Column WidthsWhen designing a table in HTML, it is

In the table below, I'd like the first and last columns (ID and checkbox) to adjust their width according to content. Currently, they are wider than necessary. The goal is for them to be sized tightly.

As for the center columns (source and target), I want them to expand to fill the remaining space in the table. It's important that both source and target have the same width at all times.

Note that while fixing the size of the first and last columns in pixels is an option, I prefer to avoid it if possible.

https://i.sstatic.net/kQlyy.png

Here's a snippet of my code (without styles):

<table>
  <thead>
    <tr>
      <th>
      </th>
      <th>
        Source
      </th>
      <th>
        Target
      </th>
      <th>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        0
      </td>
      <td>
        hello
      </td>
      <td>
      </td>
      <td>
        <input type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>

Answer №1

If you want your table to be 100% width but with specific column sizes, here's a trick: set the columns you want to adjust to 1% width so they only take up as much space as their content requires.

To make sure the middle columns have equal width, divide the remaining 98% between them by setting each to 49%:

table {
  width: 100%;
  border-collapse: collapse;
}

table,
td {
  border: 1px solid black;
}

.fit {
  width: 1%;
}

.even {
  width: 49%;
}
<table>
  <tr>
    <td class="fit">1</td>
    <td class="even">Content column 2</td>
    <td class="even">Content column 3</td>
    <td class="fit"><input type="checkbox"></td>
  </tr>
  <tr>
    <td class="fit">2</td>
    <td class="even">Content column 2</td>
    <td class="even">Extended content column 3</td>
    <td class="fit"><input type="checkbox"></td>
  </tr>
  <tr>
    <td class="fit">3</td>
    <td class="even">Content column 2</td>
    <td class="even">Even more extended content column 3</td>
    <td class="fit"><input type="checkbox"></td>
  </tr>

</table>

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

I am having trouble placing the button within the image

Essentially, my goal is to place the button within the image and ensure it remains in its position when transitioning to mobile mode or adjusting window size. This is the desired outcome: https://example.com/image https://example.com/button-image .img ...

Is there a way to execute a Python script when submitting an HTML form?

I have created an HTML form and my goal is to utilize Python to transfer the data from this form into an SQLite database file. Currently, I am attempting to achieve this using CGI. I don't require anything extravagant. Below is the code that I am work ...

Issue with margin-top on <p> and <a> elements not displaying correctly?

I've been attempting to incorporate margin-top for a link button, but unfortunately it's not working as expected. I've even experimented with inline styles for both the 'p' and 'a' tags. There are three list elements, I ...

Toggle the menu using jQuery on unordered list items

Below is the HTML code I am using : <ul class="main-block"> <li class="firstLevel"> <a href="#category">EXAMPLE CATEGORY 1</a> <ul class="dijete"> <li class="child"> <a href="some-sub-categ ...

Issues with onfocus and onclick events not functioning as expected in HTML

I have encountered what appears to be a common yet perplexing issue. You can view a draft of the page here. The specific behavior I am aiming for is as follows: To execute a calculation, use <script type="text/javascript" src="amp.js"></script> ...

Using PHP, alternate the colors by switching between four different color options

After conducting extensive research, I found that using just 2 colors instead of 4 was the best option. However, I now want to change the color alternately among 4 different options (blue, red, green, yellow). Currently, my code only includes two colors. P ...

CSS margin dispute

I'm facing an issue with two CSS classes - container and top_menu. The top_menu should not have a margin on top when used within the container class, but it somehow does. Removing the container div resolves this. How can I resolve this problem? Below ...

Adjusting divs and modifying based on the size of the screen

My website features a list of images with corresponding paragraphs of text displayed to the right of each image. I am trying to adjust the layout so that when the screen size is 736 px or less, the text is shown below the image and the image is centered. T ...

Creating a compilation of HTML file links using Gulp

Is there a way to utilize Gulp in order to compile a single HTML file containing links to all pages within a specific directory? For instance, if I have two files contact.html titled "Contacts" and faq.html titled "Frequently asked questions" located in t ...

Using JQuery to create an animated slideToggle effect for a multicolumn list

I have a large list where each li element has a width of 33%, resulting in 3 columns: computers monitors hi-fi sex-toys pancakes scissors Each column contains a hidden UL, which is revealed through slideToggle on click. JQuery $('.subCate ...

What methods are available to enforce that users only upload xlsx, csv, or xls file containing two columns and with headers that match the required names on the frontend?

I'm currently able to verify if the user has uploaded a file with xlsx, xls, or csv extensions. How can I ensure that the uploaded file not only has these extensions but also must contain two columns with 'Example' and 'Label' head ...

Unable to submit form when anchor link is clicked

Here is some code I've been working on: $("#btnsearch").click(function () { $("#frmsearch").submit(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <a href="#">some where</a> ...

Is a Selenium loop a viable option?

</head> <body> <table cellpadding="1" cellspacing="1" border="1"> <thead> <tr><td rowspan="1" colspan="3">test</td></tr> </thead><tbody> <tr> <td>click& ...

Conceal a div that has several classes and lacks an identifier using jQuery

Our goal is to hide the div that has classes k-header and k-grid-toolbar, which is a child of the g-m div: <div id="g-m" data-controllername="b-p-d" data-create="false" data-edit="false" data-update-url="/BPD/BPDPrint.aspx" data-delete="false" data-exp ...

Dynamic visuals created with Jquery and Ajax

While I'm not an experienced developer, I have managed to work with some small Jquery scripts. Lately, I've been struggling for the past month trying to figure out how to implement a specific functionality that I would like to incorporate. Does a ...

Function to find discrepancies between two sets of data in Handlebars

Just starting out with handlebars.js and in need of a helper that can compare two arrays and show the difference. I've attempted an example but seems like I'm missing something. Can you take a look at my code below and point me in the right dire ...

Leveraging JavaScript to enable automatic identification of buttons on a webpage

My website features specific buttons placed within articles and also in the head/body/footer sections. I have a plan to make it so that when a user clicks on a button, JavaScript code will determine if the button is inside an article or outside of it, then ...

What could be causing my image to not load on my HTML page?

Why is the first image loading correctly but the second one isn't appearing? <p>Please insert an image from a random website:</p> <img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" h ...

Different options for determining network connectivity on a website

Seeking Network and Location Information on ASP.Net Core MVC Web Application After some investigation, I came across the Navigator API online. For acquiring location data, it functions flawlessly. navigator.geolocation.getCurrentPosition(function (posi ...

Is there a way to trim HTML code while still maintaining the integrity of the closing tags?

Is there a way to create a blog post preview from HTML by properly closing the tags without rendering the whole content on the frontend? Currently, I am using react's dangerouslySetInnerHTML and setting styles like overflow: hidden and height: 150px. ...