Remove merged columns in adaptive table

I am working on a responsive table that has a fixed width for certain cells, but I want to reset the colspan so that the following row does not inherit this fixed width. In my specific case, the numbers 1 to 7 have a set width of 40px due to the 'position' class. The next row contains two buttons that should each take up 50% of the table width. However, when I add the half class to achieve this, it overrides the width set by the 'position' class. Since there are 8 tds total, I tried giving each button td a colspan of 4, but then the last button inherits the fixed width of the 4 'position' classes, making it too wide at 160px. Is there a way to clear the colspan and fixed width for just these buttons?

Because the number of items in the table can vary from 1-7, simply adding a colspan with the same number as the items is not an ideal solution.

View Demo

htmlcssresponsive-designhtml-table

Answer №1

In the comment I mentioned,

"The code is functioning correctly. However, the first td has a larger width than the others. The colspan="4" is targeting the first 4 tds (name, 1, 2, 3) and the second colspan is selecting the remaining 4 tds (4, 5, 6, 7)."

Using td in this way may not yield the desired result. You can try the following approach.

HTML

<tr>
    <td colspan="8">
        <div class="half"><a href="#" class="button">Button one<a/></div>
        <div class="half"><a href="#" class="button">Button two<a/></div>
    </td>
</tr>

CSS

.half{
    float: left;
    width: 50%;
}

Live Example: http://jsfiddle.net/enve/zt5W9/2/

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

Adjust the color and font style of the title text in the dialog box

I need assistance in altering the font and color of the title within a dialog box. I am looking to modify the font, size, and color. What steps should I take? Below is the code snippet: ivworknggroup.setOnClickListener(new OnClickListener() { ...

androidcssdialog

In React, I'm unable to navigate to a different page

My English may not be the best, but I am working on creating a Login Page. The issue I'm facing is that when I click the Login button, I want to navigate to the Home Page I designed using React. However, whenever I try to implement Link or Route comma ...

javascripthtmlcssreactjsbootstrap-5

Angular2 data binding does not update when properties change

I'm struggling to establish the connection between the fields and the component in order for them to update when the properties change in OnDataUpdate(). The field "OtherValue" successfully binds two ways with the input field, and the "Name" field di ...

htmltypescriptangular

JavaScript label value vanishing after postback

When using a datepicker in JavaScript, I encountered an issue where the label resets to the default value after a postback to the server, instead of retaining the user's selected values. Despite my attempts to rearrange the code, the label consistent ...

javascriptc#htmlasp.net

Adjusting iFrame Height to Fit Content Completely

I am looking to create a website where I can have a banner at the top and display another website below it without needing an additional scroll bar within the page. I have tried using an iframe, but I can't seem to get it to display correctly. I want ...

htmliframe

Can you guide me on how to programmatically set an option in an Angular 5 Material Select dropdown (mat-select) using typescript code?

I am currently working on implementing an Angular 5 Material Data Table with two filter options. One filter is a text input, while the other is a dropdown selection to filter based on a specific field value. The dropdown is implemented using a "mat-select" ...

javascripthtmlangulartypescript

Is there a way to enclose a set of elements that are aligned to the

I am facing an issue with a container div that contains multiple items. The container requires a border, but the problem arises when I float the elements left within the container, as it seems to disrupt the flow of the elements. Adding a border to the co ...

css

What is the best way to change the size of a background image

I recently discovered a helpful tutorial on resizing background images that I found very insightful. If you're interested, you can check it out here. After attempting to apply this method to a 900px width div in order to resize only vertically, I enc ...

jquerycsshtml

What is the method to retrieve the class name of an element when the div is created as '<div id 'one' class="element one"></div>'?

I have three elements named one, two, and three, declared as seen below: <div id =container> <div id 'one' class="element one"></div> <div id 'two' class="element two"></div> < ...

javascripthtmljquerycss

Can you explain the distinction between <P> and <p> tags in HTML?

Currently, I am examining HTML documents by parsing them through Java and I have noticed that the p tag is one of the most frequently utilized tags. While I understand that it is used to create a new line, I am puzzled by the fact that in some documents I ...

html

Is there a way to incorporate a Gif into the background of a three.js project?

function initializeGame() { cubeSize = 200; fieldDepth = 50; fieldWidth = 200; fieldHeight = 200; initObstacles = _ => _; // set the game size var WIDTH = 1000; var HEIGHT = 500; // set camera properties var VIEW_ANGLE = 40, ...

javascripthtmlthree.jsbackground

I'm feeling a bit lost on how to pull out HTML tag elements using Python

I have been attempting to extract the html tags for alternative purposes, but due to the structure of the html file, I am facing challenges using conventional methods to locate the elements. The section containing the elements is quite long (consisting of ...

pythonhtmlselenium-webdriverweb-scraping

Flask Pagination : UnboundLocalError occurs when trying to reference a local variable 'res' before it has been assigned

I'm currently troubleshooting an issue with flask pagination. Whenever I attempt to implement it, I encounter the UnboundLocalError. Even after removing all variables, the pagination feature still fails to function as intended. @app.route('/&apos ...

pythonhtmlmysqlflaskjinja2

Troubleshooting the issue with dynamically adding form fields in AngularJS

I am currently working on an online course application and facing an issue with adding form fields dynamically to include additional video lectures for each course. When I attempt to click on the "Add Another URL" button, nothing happens. https://i.sstatic ...

javascriptangularjshtmlangularjs-directiveangularjs-scope

Float and tap

Can someone assist me with my code? I have 4 identical divs like this one, and when I hover over a link, all the elements receive the same code. <div class="Person-team"> <div class="profile-pic-d"> <a cl ...

javascriptjqueryhtmlcss

Implementing FAQs on ASP.NET MVC is my latest project

I have stored all the questions and answers in a SQL Server table, and it is fetching them perfectly. The FAQ user interface displays all the questions correctly from the table. You can see the interface in action by clicking on the following links: Questi ...

htmlcssasp.netasp.net-mvc

The browser has disregarded a CSS rule

Hey there, I have a question that may seem silly, but I just can't seem to find the answer anywhere. Please take a look at this fiddle: I need to remove #Navigation in the CSS declaration below: #Navigation .stretch { ... } so it should look like ...

cssbrowser

accommodating multiple background images in CSS

I am currently working on a WordPress website using the Twenty Twelve theme. On one of the pages, I am trying to incorporate three background images - one at the top, the next one right below the top image, and the third one at the very bottom... Is there ...

csswordpress

The disappearing act of the Bootstrap 4 hamburger icon, despite the navbar expanding afterwards

Currently in the process of building my initial website using bootstrap 4, and encountering difficulties with my collapsible navbar and the hamburger icon. My goal is to have the navbar expand on medium screens, but switch to a hamburger icon on smaller sc ...

htmlbootstrap-4

Collapsible Rows in Material-UI Table seamlessly integrated with regular rows

While using material-ui v4, I encountered an issue where my collapsible row columns are not aligning properly with my regular columns. Below is a photo and the code snippet for reference. As you can see in the image, when I expand the Frozen Yogurt row, th ...

cssreactjsmaterial-ui