Generating a Table with automatic width using the <td> tag

Question

Generating a Table with automatic width using the <td> tag

Allow me to clarify my thoughts. I am aiming to accomplish the following:

I want to construct a table with 4 columns and multiple td (rows). However, I require each row to adjust its column width automatically based on its content.

Typically, the size of columns is determined by the largest td (row) within them:

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

My goal, however, is as follows:

While I still want to arrange elements in a Table (columns) for organizational purposes such as alphabetical sorting, I need the columns to appear like this:

https://i.sstatic.net/8XhU3.png

Any suggestions?

html css html-table

Answer 1

Answer №1

To create columns using <td>, you can apply the CSS property display:inline. However, a more efficient approach would be to utilize <div> elements with flexbox.

td {
  border:2px solid red;
  display: inline;
}
td:nth-child(1) {
  background:yellow;
}
td:nth-child(2) {
  background:blue;
}
td:nth-child(3) {
  background:grey;
}
td:nth-child(4) {
  background:orange;
}
table {
  border:1px dashed black;
}

<table>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
  <tr>
    <td>Ant</td>
    <td>Bear</td>
    <td>Cat</td>
    <td>Dog</td>
  </tr>
</table>

Answer 2

To create columns using <td>, you can apply the CSS property display:inline. However, a more efficient approach would be to utilize <div> elements with flexbox.

td {
  border:2px solid red;
  display: inline;
}
td:nth-child(1) {
  background:yellow;
}
td:nth-child(2) {
  background:blue;
}
td:nth-child(3) {
  background:grey;
}
td:nth-child(4) {
  background:orange;
}
table {
  border:1px dashed black;
}

<table>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
  <tr>
    <td>Ant</td>
    <td>Bear</td>
    <td>Cat</td>
    <td>Dog</td>
  </tr>
</table>

Generating a Table with automatic width using the <td> tag

Answer №1

Similar questions

What are the best methods for efficiently extracting web page content that is nested within HTML pages under the `<body>` tag?

Step-by-step guide on creating a blank horizontal line in an HTML table

The primary navigation item is narrower than the submenu item

How to Convert Pixel Units to Rem and Em in CSS?

How to adjust the background picture opacity in HTML

Why my attempts to alter numerous CSS elements using JQuery are failing?

Having difficulty accessing the live server on VS Code for download

Utilizing Regular Expressions to remove specific CSS attributes from an HTML content

To activate two separate click events, one for an absolute element and another for the element positioned behind it, simply click on the desired absolute element to trigger both actions

"JavaScript that doesn't rely on a specific browser

Creating dynamic cell colors in a table using PHP values

What is the best method for finding and observing the Javascript code being utilized on a webpage?

What is the best way to title an uploaded chunk with HTML5?

Utilizing AngularJS: Running a controller function within a directive

tips for incorporating staticfiles processing into css files on django

Create an Angular material table with expandable rows that become sticky when scrolled past, then automatically unstick once they are no longer in view

Do we need to duplicate structured data when listing nested objects, or is it better to avoid doing so?

Implementing jQuery stylesheet using a bookmarklet

Incorporating a feature that displays one show at a time and includes a sliding animation into an

Issues accessing my Facebook account due to domain problems