Can the columns of a table be evenly spread out if their width is based on the content within them?

Is there a way to evenly distribute the columns of a table when the width is determined by the content?

The table can have 3 or 4 columns that contain dynamic data, with one column potentially having large amounts of data.

Here are three example tables:

<table>
  <thead>
    <tr>
      <th>Title block 1<br> or block 2</th>
      <th>Title block 2<br> of block 3</th>
      <th>This is the title for<br> block 3</th>
      <th>Last block title<br> here</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213, 124, 213, 124, 213...</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Title block 1<br> or block 2</th>
      <th>Title block 2<br> of block 3</th>
      <th>This is the title for<br> block 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Title block 1<br> or block 2</th>
      <th>Title block 2<br> of block 3</th>
      <th>This is the title for<br> block 3</th>
      <th>Last block title<br> here</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

I want the first column to align with the far left and the last column with the far right, distributing the rest equally.

Though flexbox works for even distribution, it doesn't replicate the bottom border style in the table headers.

The mockup demonstrates the desired distribution in the sample table.

https://i.sstatic.net/Vglgt.jpg

How can I achieve this even distribution based on content in table columns?

FIDDLE

htmlcsshtml-table

Answer №1

Have you experimented with setting the width to "100%"?

<table width="100%">
  <thead>
    <tr>
      <th>Title block<br> of block 1</th>
      <th>Title block<br> of block 2</th>
      <th>This is the title for<br> of block 3</th>
      <th width="200px">Title block<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213, 124, 213, 124, 213, 124, 213, 124, 213, 124, 213, 124</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table width="100%">
  <thead>
    <tr>
      <th>Title block<br> of block 1</th>
      <th>Title block<br> of block 2</th>
      <th width="200px">This is the title for<br> of block 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table width="100%">
  <thead>
    <tr>
      <th>Title block<br> of block 1</th>
      <th>Title block<br> of block 2</th>
      <th>This is the title for<br> of block 3</th>
      <th width="200px">Title block<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

After reviewing your fiddle :

Consider adding a fixed width at the end of the last child:

&:last-child {
  padding-right: 0;
  width: 200px;

https://jsfiddle.net/qjx9wceh/6/

Answer №2

Adjust the table's width to 100%

Make sure to also set the table's layout property to fixed
The available properties are

table-layout: auto|fixed|initial|inherit;

For more information, visit: https://www.w3schools.com/cssref/pr_tab_table-layout.asp

Your updated fiddle can be found here -> https://jsfiddle.net/qjx9wceh/4/ 

table
{
width:100%; 
table-layout:fixed; 
text-align:left;
}
<table>
  <thead>
    <tr>
      <th>Title block<br> of block 1</th>
      <th>Title block<br> of block 2</th>
      <th>This is the title for<br> of block 3</th>
      <th>Title block<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213, 124, 213, 124, 213, 124, 213, 124, 213, 124, 213, 124</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Title block<br> of block 1</th>
      <th>Title block<br> of block 2</th>
      <th>This is the title for<br> of block 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Title block<br> of block 1</th>
      <th>Title block<br> of block 2</th>
      <th>This is the title for<br> of block 3</th>
      <th>Title block<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

Answer №3

Establish the following settings.

table {
  table-layout:fixed;

} 
table td {
   width:1%;
}

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

How can I extract values from HTML attributes in C# using string manipulation techniques?

Here is some HTML code I am working with: <div class="topright"> <a href="" TARGET="_parent" title="News Letter" > <img border="none" src="/images/newsletter-button.gif' alt="News Letter" /> </a> </div> ...

c#asp.nethtml

In what way does AngularJS asynchronously navigate through the Angular template made up of HTML and AngularJS Directives?

While diving into the AngularJS book penned by Brad Green and Shyama Sheshadari, I stumbled upon the following insightful passage: The initial startup sequence unfolds as follows: 1. A user triggers a request for your application's first page. ...

javascripthtmlangularjsasynchronous

Unusual Behavior Uncovered in jQuery Selectors

Have you ever noticed a peculiar behavior of jQuery selectors? I recently discovered that when the page contains elements with non-unique IDs, jQuery returns different results for the same selectors: Here's an example of HTML code: <button id=&ap ...

javascriptjqueryhtmljquery-selectors

Having trouble positioning the button on the right side of the page and aligning the text in the center of the page

Having trouble positioning the button to the right of the page and aligning the text in the center, despite adding CSS properties such as float: right. <div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padd ...

htmlcss

Adjusting the view with a sliding tool

I am new to jQuery and want to create a compact plugin for my specific needs. My goal is to develop a simple timeline plugin that looks like the example below: The green bar below contains two small rectangles that can be dragged left or right to zoom in ...

javascriptjqueryhtml

The data retrieved from the $.ajax() request in Vue.js is not properly syncing with the table

After setting up an $.ajax() function and ensuring the data binding is correctly configured, I expected the data to append to a table on page load without any issues. However, the data is not appearing as expected. Is there something that I might be overlo ...

javascriptjqueryhtmlajax

Displaying a list of terms and their corresponding definitions side by side

I need to display multiple rows of data, with a title and corresponding data on the same line. While I have found answers on sites like SO (e.g. How to style dt and dd so they are on the same line?), the suggested solutions don't seem to work for my s ...

css

What is the proper usage of main.js and main.css within the skeleton portlet project that is created by the Liferay 6.0.6 plugin SDK?

Is it a good practice to include portlet-specific JS or CSS in them only if <portlet:namespace /> works within them? Should I rely on unique function/variable names or class names instead? ...

javascriptcssliferayliferay-6

Implementing Window.Open function within a jQuery Modal

I've set up my Modal Div like this: <div id="dialog-modal" title="Open File"> <img alt="progress" src="images/ajax-loader.gif"/> </div> When I click the button, the modal appears and I can see the progress icon. <sc ...

javascriptjqueryhtmlasp.netjquery-ui

Interactive Image Effects with Hover using HTML and JavaScript

I have observed that the transform works fine, but there is a slight issue when initially hovering or touching the image. After the first touch or hover, everything works great. Any assistance on fixing this minor issue would be greatly appreciated. Thank ...

cssimagebootstrap-5mousehover

React Router version 6.4.5, automatic redirection upon loading the page

Seeking assistance with setting up redirects. Below are snippets of the code. index.js const router = createBrowserRouter([ { //Defining App as the root element... path: "/", loader: () => { }, element: <App/>, ...

javascripthtmlcssreactjsreact-router

Create a jQuery animation that mimics the Safari home page experience. Create a

Is there a way to achieve a similar effect as Safari's new tab using HTML5 canvas instead of CSS3 3d transform? While we can create a similar transformation with CSS3 3D transform, it is limited to Webkit browsers. Can we use CANVAS to replicate this ...

jqueryhtmlcsscanvas

Issue with .css() function failing to apply width attribute

My goal is to shift the width of a div as specific images load in my application. I have tried reading the div's current width, adding 128 to it, and then using the .css() function to update the div's new width. However, I have encountered an iss ...

javascriptjquerycss

Overlapping input elements occur when Twitter bootstrap prepended input elements are positioned side by side

I ran into an issue while attempting to place two input elements side by side, with a prefixed item on the first input, using display:table styles. Unfortunately, the second input element ends up overlapping the first. I tried using box-sizing: border-box ...

htmlcsstwitter-bootstraptextinput

Show text and image side by side on the same row

I am looking to showcase both image and text on the same line, similar to how it's done on tripadvisor.in/ <div style="display:inline-block"> <div style="display:inline;float:left"> <a href="CollegeProfile.php" class="white"> <h ...

css

Adjust the background color of child divs when the parent div is being hovered over

I am facing a challenge with my current setup: <div class="parent"> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> </div> My goal is to change the background co ...

javascriptjqueryhtmlcssthis

Is the function failing to detect the updated variable because it is not declared as a global variable?

I have created a quiz with 7 select boxes and a submit button, aiming to display a warning error if the select boxes are not changed or show the score if they are changed. I initialized a variable called 'changed' as false. When a select box is ...

javascriptjqueryhtml

Is the User Agent Stylesheet giving h1 elements a default bold setting?

My h1 is appearing bold due to the user agent stylesheet, but I want it to be normal. How can I override this? h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67em; -webkit-margin-after: 0.67em; -webkit-margin-start: 0px; -webkit-margin-end: ...

html

Get rid of the .php extension in the URL completely

Lately, I've been experimenting a lot with the .php extension. I successfully used mod_rewrite (via .htaccess) to redirect from www.example.com/example.php to www.exmaple.com/example. Everything is running smoothly. However, I noticed that even though ...

javascriptphphtmlcss

I am looking for two divs or table cells to float alongside each other, with one set to display:inline and the other expanding to fill the remaining space of the row

What I desire: My current accomplishment: I successfully floated both DIV tags side by side and also experimented with tables. My goal is to have the HR line fill the remaining horizontal space that the title does not occupy. However, I prefer not to us ...

htmlcss