Bug in Colspan when combining percentages and numerical values

Having trouble with tables and trying to use percentages in the colspan attribute to split 2 cells evenly in a 3-cell table, but encountering a bug. This has caused all other colspans in the table to have no width and it's become a mess. I can't use percentages in the 3-cell row because it would result in an odd number. Here's the code snippet:

<table style="table-layout:fixed;" border="1" width="100%">
        <tr>
            <td colspan="100%">Notify</td>
        </tr>
        <tr>
            <td colspan="25%">Store</td>
            <td colspan="75%">Logo</td>
        </tr>
        <tr>
            <td colspan="100%">Discount</td>
        </tr>
        <tr >
            <td>Summer</td>
            <td>Discounts</td>
            <td>Fashion</td>
        </tr>
        <tr >
            <td colspan="50%">News1</td>
            <td colspan="50%">News2</td>
        </tr>
        <tr>
            <td colspan="100%">News 3</td>
        </tr>
        <tr>
            <td colspan="100%">News 4</td>
        </tr>
    </table>
htmlcsshtml-tablepercentage

Answer №1

This concept of using colspan is not the correct approach. It would be more appropriate to utilize width in this scenario.

Colspan specifically requires a numerical value, rather than a percentage, indicating how many columns a single TD element should span across within a table.

Consider the following example:

 <tr>
    <td width="50%">News Article 1</td>
    <td width="50%">News Article 2</td>
  </tr>
  <tr>
    <td colspan="2">News Article 3</td>
  </tr>
  <tr>
    <td colspan="2">News Article 4</td>
  </tr>

Answer №2

You made a mistake with the colspan attribute, it does not accept a percentage (%) value. You should use it like this.

<table style="table-layout:fixed;" border="1" width="100%">
    <tr>
        <td colspan="3">Notify</td>
    </tr>
    <tr>
        <td colspan="2">Store</td>
        <td >Logo</td>
    </tr>
    <tr>
        <td  colspan="3">Discount</td>
    </tr>
    <tr >
        <td>Summer</td>
        <td>Discounts</td>
        <td>Fashion</td>
    </tr>
    <tr >
        <td colspan="2">News1</td>
        <td >News2</td>
    </tr>
    <tr>
        <td  colspan="3">News 3</td>
    </tr>
    <tr>
        <td  colspan="3">News 4</td>
    </tr>
</table>

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

Issue with Javascript function when HTML settings are updated using Ajax

I am experiencing an issue and struggling to understand the cause. Initially, I have a list of elements with a click event using JavaScript. The click event functions correctly when the page loads. However, upon clicking the 'more' button, which ...

jqueryhtmlajax

challenges arise when using star icons to rate items visually, as the corresponding hidden values for backend processing are linked to radio input types

Hello, I am trying to retrieve the value of an input type radio by clicking on a star image visually. I have been successful in this, but I am having trouble resetting the star image in another row. You can view a demo of this here. I will explain what I ...

jqueryhtmlcssdefault-valuerating

Tips on relocating a button in a column located within a table header

Is there a way to adjust the positioning of the buttons in a thead to align with a colored border below it? <table> <thead> <!-- table extra buttons --> <tr style="border-bottom-style: solid; border-bottom-color: #FFE84D; ...

htmlbootstrap-4

Position the div to align with just one side of the table-cell

I am struggling with making the height of my code dependent on only the left column, while still allowing the right column to be scrollable if it contains more content than the left column. Despite my best efforts, I can't seem to figure out how to a ...

htmlcss

Move anchor tags within HTML content produced from Markdown using Jekyll

I am facing an issue with the navigation bar on a website I am currently developing. The fixed navigation bar at the top is causing some alignment problems with anchor tags. While I know about the common solution to this issue, I am unsure of how to implem ...

htmlcssmarkdownjekyll

Another query has arisen about the html5 dtd/schema

How can we validate HTML5 documents for syntax accuracy and structural soundness if there is no DTD or schema? It's crucial for our industry to have a reliable method of ensuring validity. The W3C's online validation tool is helpful for individua ...

htmlschemadtd

Is the navigation dropdown toggle triggered by both mouseout and when hovering off of it?

I'm looking for some assistance in modifying the code so that the dropdown menu not only hides on click, but also hides on mouseout and/or when another top-level menu button is hovered over. View jsfiddle example $(document).ready(function () { ...

javascriptjquerycss

Unexpected behavior from HTML5 number input field

Is there a way to prevent users from entering values outside the specified max and min attributes? The constraints work when using the arrows in the input field, but not when typing directly into it. Note: I am considering utilizing angularjs for this fun ...

angularjshtml

Demonstrating the transformation of child elements into parent elements through angular 6 ngFor

I have a JSON array dataset where each object may contain nested arrays. In order to display the inner nested array elements as part of the parent array using Angular's NgFor, I need to format the input like this: [{ 'id': 1, 'tit ...

javascripthtmlangular

Transitioning to mui5's sx prop instead of makeStyles is generating a typescript error - none of the overloads match this call when passing an object with

I encountered an issue while converting a component to mui 5. Here is the original code snippet: const useStyles = makeStyles({ imageContainer: { display: "flex", width: "65%", float: "left", marginRight ...

cssreactjstypescriptmaterial-ui

What are the steps to interact with a marquee using Selenium?

Currently, I am faced with an application that displays a list of upcoming vessels in a marquee format. I am looking for a way to click on the specific data using Selenium with Java. Any advice or alternative solutions would be greatly appreciated. ...

javahtmlseleniumclickmarquee

Can you explain the meaning of this compound CSS selector?

.btnBlue.btnLtBlue Is this referring to an element that has both the classes btnBlue and btnLtBlue applied? ...

csscss-selectors

The combination of various background patterns and varying levels of color transparency

Trying to solve a problem here. I have a basic website with a repeating pattern background, and I'm attempting to create a color overlay using multiple backgrounds in CSS. Here's the code I'm using: html,body { background: rgba(200, 54, 5 ...

htmlcss

Collecting data from an HTML form filled out by users

I need a way to capture user input from an HTML form and display it later on my website. I want to show all the information users provide along with their pizza selections. I've been struggling for hours trying to make this work without success :( Spe ...

javascripthtmlcss

SCRIPT5007: The property 'href' cannot be assigned a value as the object is either null or undefined

This script is functioning properly in browsers like Chrome and Firefox, however it is encountering issues when used with Internet Explorer. An error message is displayed in the IE console: SCRIPT5007: Unable to set value of the property 'href': ...

javascriptphpjqueryhtmlinternet-explorer

Find and conceal the object within the list that includes the term "Ice"

The teacher's assignment is to create a radio button filter that hides items with the word "Ice" in them, such as "Ice Cream" and "Iced Tea." Here is the current code I have been working on: <!DOCTYPE html> <html> <head> <me ...

javascriptjqueryhtmlfunctionjquery-ui

Bootstrap SASS creates a directory named "vendor" during compilation

After configuring Bootstrap SASS, I encountered a small issue where Compass generates a folder named 'vendor/bootstrap.css' next to the styles.css file. It seems quite strange because Bootstrap is already included in style.css. Unfortunately, I w ...

csssassbootstrap-sass

Is it possible to update the window title using javascript after a 3-second delay?

How can I alter the title bar of a window with a 3-second delay? This should be achieved using Javascript. www.nazeer.com ...

javascripthtml

Input field in a tableview

I have a ListView that features a dropdown, 4 textboxes and buttons. My goal is to only show the fourth textbox (enclosed in a span) when the dropdown value in each row of the ListView is set to 2. For instance, if there are 5 records being displayed in t ...

javascriptasp.nethtmllistviewtextbox

Heroku encounter an H14 error - "the absence of running web processes"

An H14 error occurred during deployment on Heroku. Here is my Procfile: web: gunicorn -w 4 -b 0.0.0.0:$PORT -k gevent main:app Error log on Heroku: 2017-01-23T10:42:58.904480+00:00 heroku[router]: at=error code=H14 desc="No web processes running" method ...

pythonhtmldjangoherokuweb-deployment