Is it possible to create a table where all columns have equal width, without setting a specific overall table width or specifying individual column widths?
In simpler terms, can we make each column automatically adjust to the width of the widest column, without knowing that width in advance?
(And by this, I mean achieving this layout without having to wait for the table to render, calculate the width of each column, and then use JavaScript to set all columns to the largest width).
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>A different approach to traditional tables is using a CSS grid layout. To learn more about CSS grid and how it can be implemented, check out this link:
https://www.w3schools.com/css/css_grid.asp
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
Using the display: grid property is a better option compared to using <table>.
.b {
display: inline-block;
}
.b>div {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 2px;
}
.b>div>div {
border: 1px solid grey;
}<div class="b">
<div>
<div>A</div>
<div>BB</div>
<div>CCC</div>
<div>DDDD</div>
<div>EEEEE</div>
<div>F</div>
<div>GGGG</div>
<div>HHHHH</div>
<div>IIIIII</div>
<div>JJJJJJJ</div>
</div>
</div>Are you looking for something like this? Does this meet your requirements?
Here is the solution to your query:
Is it possible to create a table with columns of equal width without specifying the overall width of the table or the individual column widths?
In my CSS code below, I have not set a specific table width or fixed column widths. Instead, I have defined percentage-based column widths relative to the number of columns in the table.
This results in a table where all columns have the same width and the table expands only as much as necessary.
td {
border: 1px solid silver;
width: 20%;
}<table class="a">
<tr>
<td>1</td>
<td>22</td>
<td>333</td>
<td>4444</td>
<td>55555</td>
</tr>
<tr>
<td>66</td>
<td>7777</td>
<td>888888</td>
<td>99999999</td>
<td>0000000000</td>
</tr>
</table>update: The code has been modified to include the latest suggestions provided by you all. I've got this data.json file: [{ "codigo": 21420, "desc": "itv orion 20 a", "prod_24_h_kg": 22 }, { "codigo": 21421, "desc": "itv orion 20 w", "prod_24_h_kg": ...
I have a div with a background image of a world map that I need to clip at two precise points. Clipping from the left side is straightforward. In my CSS: .le-map { background-image: url('../img/le-map-of-le-world.mlg'); background-size: 100% ...
Here is a working example: var myvar; $.get('formElements.html', function(data) { myvar = data; }); However, this code does not work as intended: var myvar; $.get('formElements.html .className', function(data) { myvar = data; } ...
After clicking a button, I want to load a div and not have it load on page load. I specifically mentioned loading the div after clicking the button, not just showing it. The code is working, but I need help implementing it in WordPress. <div id="cont ...
After deciding to create a portfolio website, I came across an example that I liked and decided to replicate its style. However, I encountered an issue with responsiveness. When you resize the window on my site (https://olaolu.dev), everything changes size ...
I am facing an issue with placing a bullet point between list items generated from ng-repeat in Angular. Despite my efforts, the bullet point keeps appearing after the items instead of between them. Here is how it currently looks: Venue1• $20 Ho ...
There is a common scenario where I often encounter this issue: <span> <p>hello world</p> </span> It involves reducing the width of a paragraph to fit the text, but unfortunately it leads to clutter in my HTML. Is there a way to ...
In the visual provided, there is a survey with extended answer text requiring multiple rows for each response. My goal is to align these rows so that they match up with the initial row of each answer. Is this achievable? ...
Frustration has been brewing within me all week as I grapple with the task of sending out an important emailer soon. The challenge lies in aligning these product images next to their descriptions at the center, a feat that seems impossible to achieve withi ...
Check out this CSS code snippet @import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans); @import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans); .loading { position: fixed; top: 0; left: 0; width: 100%; height: ...
Utilizing the onkeyup event in Javascript, I am capturing the text entered into a contenteditable div and transferring it to an input field. Users have the ability to apply bold or italic styles to the selected text by highlighting and clicking on the res ...
I am currently developing a mobile app and I need to align three images one below the other at the right corner next to some text. Any suggestions would be greatly appreciated. Thank you in advance. Below is my code snippet: <div> <ul data-r ...
I'm encountering an issue with the application I'm developing. It involves working with an Oracle database to retrieve information and display it on a webpage in a table format. However, I am interested in exploring alternative methods for workin ...
I am currently working on implementing a show/hide function, but I am encountering an issue with swapping the image (bootstrap class). The show-hide function is functioning properly; however, I am struggling to determine which class is currently displayed. ...
I'm struggling to align the font awesome icons with a lower text section in the center. Here is the HTML code snippet: .education-title { font-family: Alef, Arial, Helvetica, sans-serif; text-align: center; font-size: 1.5em; } .edu-co ...
I've been working on streamlining my HTML code and moving as much as possible to my CSS file. However, I'm facing an issue with getting an image to display when writing the CSS code for it. Here's the HTML: <html> <head> <l ...
After working with bootstrap, I am looking to position the last row of the page at the bottom in a fixed and responsive size manner. ...
Currently, I am utilizing the Swiper plugin created by iDangero.us. Within my layout design, there are 6 slider images accompanied by 6 thumbnails. Surprisingly, when I attempt to center align the thumbnails, it appears to cause issues with the plugin. Th ...
Here is the select HTML code I am working with: <div class="form-group col-lg-6 row"> {{ Form::select( 'state',array( 0 => '' ),null, array( 'class' => 'form-control', 'data-placeholder' =&g ...
In my Python script, I am trying to play/pause a YouTube video using driver.find_element_by_name("body").send_keys('keys.SPACE'), but it doesn't seem to work. Is there any alternative method I can use? Since the Selenium method is ...