utilize rows as columns in a table

I'm having a row with 4 columns, and I need the last 2 columns to stack below and utilize all available width. How can I achieve this?

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

    <table border="1" style="width: 100%;">
        <thead>
            <th>example</th>
        </thead>
        <tbody>
            <tr>
                <td style="width: 8%;">
                    title1
                </td>
                <td style="width: 100%;">
                    column1
                </td>
                <td style="width: 8%;">
                    title2
                </td>
                <td style="width: 100%;">
                    column2
                </td>
            </tr>
        </tbody>
    </table>
htmlcss

Answer №1

Avoid relying on tables for such layout requirements; instead, consider leveraging flexbox to automatically wrap content onto a new line if it exceeds the available space. Alternatively, divs with floats can also be used as an alternative approach.

Answer №2

Give this a try

<table border="1" style="width: 100%;">
    <thead>
        <th>example</th>
    </thead>
    <tbody>
        <tr>
            <td style="width: 50%;">
                title1
            </td>
            <td style="width: 50%;">
                column1
            </td>
            <td style="width: 50%;">
                title2
            </td>
            <td style="width: 50%;">
                column2
            </td>
        </tr>
    </tbody>
</table>

notes: Adjusted widths to 50%

Alternatively, you can try this

<table border="1" style="width: 100%;">
        <thead>
            <th>example</th>
        </thead>
        <tbody>
            <tr>
                <td >
                    title1
                </td>
                <td >
                    column1
                </td>
            </tr>
             <tr>
                <td >
                    title2
                </td>
                <td >
                    column2
                </td>
            </tr>
        </tbody>
    </table>

notes: Added an extra table row with <tr>

Hopefully, this will assist you in understanding better!

Answer №3

One solution is to implement flexbox in your code.

.parents {
    display: flex;
    flex-wrap: wrap;
}
.child {
    flex: 50%;
}
.parents2 .child:nth-of-type(1n+3) {
    background: red;
    flex: 100%;
}
<div class="parents">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>
<p>&nbsp;</p>
<div class="parents parents2">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

Answer №4

To enhance your table layout, consider utilizing the CSS properties colspan or rowspan.

<table border="1" style="width: 100%;">
        <thead>
            <th>example</th>
        </thead>
        <tbody>
            <tr>
                <td style="width: 8%;">
                    tittle1
                </td>
                <td style="width: 100%;">
                    colum1
                </td>
                <td style="width: 8%; colspan:3: rowspan:3">  #here are the changes
                    tittle2
                </td>
                <td style="width: 100%; colspan:3 ; rowspan:3"> #here are the changes
                    colum2
                </td>
            </tr>
        </tbody>
    </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

What is the main purpose of using the CSS transform:translate() property?

When CSS3 introduced animations with transition properties, it gave developers two main ways to change the position of an element. The first method involves setting the element's position as absolute and adjusting the left, right, top, and bottom prop ...

htmlcsstransition

"Navigate back with just a click - XSL button

My expertise in this area is limited. After some searching, I couldn't find exactly what I need. Hopefully, the solution is simple. I am currently developing a software control system with a built-in web server. Certain points during navigation requi ...

javascripthtmlxmlxsltxslt-1.0

Creating a Vue component to display a table with two data points per row

Can someone please guide me on how to achieve this using v-for or v-repeat in Vue.js? Any help would be appreciated. Instructions for rendering a table with two pieces of data per row Example JSON Data Format: [ 'x', 'y', ' ...

cssvue.jscss-tables

Incorporate a JSON file into the Webpack output separately from the bundle.js file

Is there a way for my webpack application to read a JSON file at runtime without including it in the bundle.js after packaging? I want the JSON file to be available in the package folder but not bundled with the rest of the code. How can I achieve this? ...

node.jshtmlreactjsnpmwebpack

Endless looping of numerous consecutive animations

Is it possible to apply two animations to an element using only CSS and without the need for JavaScript? These animations should run sequentially an infinite number of times. @keyframes show { from, to { z-index: 100; } } @keyframes wait { ...

csscss-animations

What is the best way to store article IDs using Javascript or HTML?

On my web page, I have a collection of links that users can interact with by clicking and leaving comments. These links are loaded through JSON, each with its unique identifier. But here's my dilemma - how can I determine which link has been clicked? ...

javascriptjqueryhtmljsonjquery-ui

List the acceptable favicon formats for Internet Explorer version 10 and above

When I say type, I'm referring to the file extension. My favicon displays correctly in Firefox, Chrome, and Safari, but someone suggested that the issue may be related to the favicon type. Is there a reliable online resource where I can find informa ...

htmlinternet-explorerfavicon

Using flexbox to adjust the height of a block in the layout

Is there a way to modify the height of .half-containers1 and .half-containers2? Additionally, how can I create the triangle shape that is shown in the image? Is it achievable with CSS alone or do I need to use an image? Check out my fiddle for reference ...

htmlcssflexbox

The initial transition in offcanvas on bootstrap 5 is not appearing when a placement is dynamically added

I am currently working on triggering an Offcanvas with JS and making the placement configurable. The issue arises when attempting to dynamically set the offcanvas-end class to the offcanvas element, as it does not transition smoothly the first time it is t ...

javascriptcsstwitter-bootstrapcss-animationsbootstrap-5

Is it possible to get this numeric input working properly? [HTML5]

How can I create a button that generates a random number between 0 and a specified value x when clicked? Currently, my implementation is returning NaN instead of the desired random number. function generateRandomNumber() { document.getElementById("num ...

html

How can one retrieve an element based on its attribute?

Below is a custom tag/directive that I am using: <tile class="ng-scope gridster-item" tilevalue="1" gridster-item="tile" row="0" col = "0" ng-repeat="tile in selectedTiles"> </tile> I'm trying to figure out how to set focus on this eleme ...

javascriptjqueryhtmlcssangularjs

Using Vue to create smooth CSS transitions for video elements, fading in and out

Within my project, there are 4 sets of videos all loading simultaneously, but only one is visible at a time. Users have the ability to switch to the next/previous videos by using arrow keys. I am interested in implementing fade in/out transitions on these ...

javascriptcssvue.jsanimationcss-transitions

Retrieve the outcome from the PHP webpage

I have recently developed a contact page, but I am experiencing an issue with the submit button's functionality. When I click on the submit button, the form is supposed to send the information to a PHP file on the server-side. However, the button does ...

javascriptphpjqueryhtmlcss

Simple linking inside a Div container

I'm working on a div that has the following markup: <div class="col-sm-12"> <p class="bg-info">Basic Information</p> </div> Here's how it currently looks: I want to add an 'Add /Edit' link to t ...

htmlcsstwitter-bootstrap-3

HTML table with two rows of cell pairs

Is it possible to achieve the layout shown in this screenshot using an HTML table? I am aware that I can use <div> for this, but I would prefer to maintain the table formatting. https://i.sstatic.net/ESZkn.png ...

htmlcsshtml-table

ASP: The submenu items remain visible

I must express my gratitude for the wealth of knowledge this site has provided me with. It has been an invaluable resource for me this year, even though I have scoured every corner and still come up empty-handed. Allow me to simplify the situation at hand ...

htmlcssasp.netmenuitemaspmenu

Tips for implementing validators for both domestic and international phone numbers in Angular

Using the following code in a TS file, the first argument always works before the "||". However, only the regex needs to be manipulated. phoneNumber: ['', [Validators.required, Validators.pattern(('^[0]{1}[1-9]{9}$')||('^\&bs ...

htmlangular

Adjustable height for Material UI tab components

I encountered an issue that I initially thought was related to the general configuration of my app and the height I assigned to my page wrapping classes. However, after creating a simple out-of-the-box material UI tab example, it became clear that this beh ...

cssreactjssassmaterial-ui

Ways to center text vertically within a cell in a Bootstrap 5 table

I am trying to achieve vertical alignment in one of the cells of a table I created. According to the Bootstrap 5 documentation, the vertical-alignment utilities only affect certain elements like inline, inline-block, inline-table, and table cell elements. ...

htmlcsstwitter-bootstrapbootstrap-5

Embed a physical entity within another physical entity

On my webpage, I have 2 toggle buttons - "Leaderboard" and "MedalTally". The layout looks like this: https://i.sstatic.net/IohqA.png Here are the codes for the above page: *, *:before, *:after { box-sizing: border-box; } html { overflow-y: scrol ...

javascriptjqueryhtmlmysqlcss