A CSS-only table featuring three cells that automatically resize on the left and right

I currently have three elements in a row that I am displaying using a table:

<table>
  <tbody>
    <tr>
      <td id='td1'>some text</td>
      <td id='td2' style='width:600px;'>some text</td>
      <td id='td3'>some text</td>
    </tr>
  </tbody>
</table>

I am looking for a way to resize both the left and right cells simultaneously when the browser window is resized. I'm wondering if this can be achieved without the use of JavaScript.

Although I have experimented with CSS resize, it seems to not work in Internet Explorer. I've also tried adjusting the widths of the cells, but so far have had no success. As someone new to CSS, I'm finding this quite challenging.

Is there a possible solution to this issue? Thank you in advance.

css

Answer №1

Not sure if it would work on mobile, but have you experimented with....

<table>
    <colgroup>
        <col class="first" />
        <col />
        <col class="last" />
    </colgroup>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

You can then utilize the col.first and col.last classes to customize the styling using css.

Reference: http://www.w3.org/TR/html-markup/col.html

Additionally, make sure to eliminate all inline css in your html. Keeping css separate will simplify maintenance of the document through css files. Also, avoid using IDs for td elements and consistently use " to enclose html attribute values.

Another option is to include:

table {
    table-layout: fixed;
}

This will prevent the browser from calculating the initial width of each cell based on their content and instead assign them equal widths initially. (The height will still adjust according to content.) You can then override specific columns with css.

Answer №2

experiment with this css suggestion

table{
width:100%;
}

this technique is effective.

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

Double up on the ul lists for added full-width border effect

My goal is to achieve a design similar to the following image: Here's what I've accomplished so far: <ul class="flechalista"> <li><a href="#">2012</a> <ul class="flechalista"> <li>Enero</li> ...

htmlcsshtml-lists

Expanding the blank area on the right margin of the page

Recently, I took a responsive website template and converted it into an ASP.NET MVC app. However, I've encountered some peculiar behavior when resizing the browser window. As the width of the window decreases below 986 pixels, a mysterious white "spac ...

htmlcssresponsive-design

Troublesome alignment with bootstrap grid system

I require some assistance with the following: https://i.sstatic.net/vK9zmm.png Specifically, I need help regarding the structure shown below: <div class="row"><div class="col-md-4"> <a class="individ" href="index.p ...

phphtmlcsstwitter-bootstrap

Discovering Characters in String using jQuery and Implementing a Personalized Class

Update: To achieve the desired typography, I will need to implement some creative jquery / css techniques. The first step is to create a class called .underlined which will allow me to have complete control over the underline by setting a background imag ...

jquerycssregexstring

I am puzzled as to why there is extra space on the right side of the output. Is there a way to utilize Bootstrap 4 to fill in

What could be causing the space at the end of the output? And how can I utilize Bootstrap 4 to fill that space? .navbar-custom { background-color:rgb(128 128 128 / 18%); height:48px; } .close{ margin-bottom: 40px; } h2{ margin-to ...

htmlcssbootstrap-4containersnavbar

Troubleshooting JQuery AJAX HTML Problems in Google Chrome and Firefox

I'm facing an issue with my code and I'm not sure what to do. It works perfectly on Internet Explorer, but when I try to open it on Chrome or Mozilla, the links in my menu don't work! I click on them but nothing happens. Can someone please h ...

javascriptjqueryhtmlcssajax

Strange yellow background color is showing up on OSX Safari

Whenever I hover over a language link with the language submenu open, an unexpected yellow background-color appears. This issue seems to be caused by the CSS rotation used for animating the menu opening. The problem is only noticeable on non-retina screen ...

htmlcssanimation

What is the best way to ensure a div stays inline with the main product box?

https://i.sstatic.net/KM3T2.png https://i.sstatic.net/tcUDg.png .product-row { margin: 0px 0px 0px 0px; } .product-box { display: flex; flex-direction: column; width: 300px; padding: 15px; margin: 0px 26px; position: relati ...

htmlcssbootstrap-4

Activate Dropdown on hover and automatically close the menu when a link is clicked

Looking for assistance with a Dropdown menu that opens on mouse hover but needs to close when a link is clicked within the menu. Do you think JavaScript would be necessary for this function? .dropdow { position: relative; ...

htmlcss

What is the best way to horizontally align my divs and ensure they stack properly using media queries?

My layout is not working as expected - I want these two elements to be side by side in the center before a media query, and then stack on top of each other when it hits. But for some reason, it's not behaving the way I intended. I've tried to ce ...

javascripthtmlcss

The optimal method to showcase lists of names: HTML or CSS?

I have a roster of 40 individuals, complete with their titles and additional details akin to a yearbook layout without the actual photos. Previously, I relied on HTML tables to format this information, but I am contemplating whether there might be a more e ...

htmlcssjoomla3.0

Looking to find a way to compare two CSS class attribute values using XPath?

After reviewing the answers to the questions regarding how to target elements with multiple classes, I came across this solution: //div[contains(@class, 'class1') and contains(@class, 'class2')] However, I have concerns that this meth ...

htmlcssxmlxpath

Is there a way to lock the eye icon in place within the password field using Vue.js?

I added an eye icon to the right side of my password input fields. However, occasionally error messages may pop up on the page to signify issues with the input fields. When these error messages appear below the relevant input field, the position of the eye ...

cssvue.jsinput-field

What is the best way to include an active CSS class in a menu item?

Link to example Can you figure out why the Home button is not turning red in this code snippet? .navbar a:hover, .navbar a:focus, .navbar a:active { color: red !important; } <nav class="navbar navbar-expand-lg"> <div class="collapse navbar ...

htmlcsstwitter-bootstrap

Ways to personalize the arrow component in react-popper

How can I match the arrow style with the popper appearance? import React from "react"; import ReactDOM from "react-dom"; import { Manager, Reference, Popper } from "react-popper"; function App() { return ( <Manager> <Reference> ...

cssreactjsbootstrap-4react-popper

Help! My HTML/CSS (Bootstrap) text won't center properly. Can anyone assist me?

My text doesn't seem to be centered on the page, despite using the "text-center" class for the caption text. What am I missing here? <div class="text-center"> <h1>Evelyn Lauder </h1> <h5 class="font-italic"> 1936-2011</ ...

htmlcssbootstrap-4

How to perfectly center an image vertically within a div using CSS

Seeking assistance to properly align images of different sizes in the center of a container div. Check out the attached image for reference, showcasing the gray background and the desired alignment of images in the middle. https://i.sstatic.net/M16V1.png ...

htmlcss

Is there a way to alter the height of elements created dynamically with JavaScript?

Is there a way to dynamically adjust the height of each string on a fretboard based on values from an array called stringGauge? The strings are initially set at a height of 8px using the .string:before class, but I want them to increase in thickness as the ...

javascriptcssarraysloopspseudo-element

the image srcset fails to resize when the viewport decreases

I'm starting to think that maybe I don't fully understand the srcset attribute. Take a look at this HTML snippet: <img srcset=" /path/to/image1 343w, /path/to/image2 768w, /path/to/image3 304w" sizes=" ...

htmlcssresponsive-designsrcset

Issue with Bootstrap 4: Dropdown menu extends beyond the edge of the screen towards the right side

I'm having trouble with the dropdown items extending off the page. I've tried a few solutions from BS3 but they don't seem to be working for me. I suspect it might have something to do with the ml-auto class. (please disregard the if-else st ...

twitter-bootstrapcssbootstrap-4