Using CSS/HTML to showcase rows in a vertical table format (or similar)

Question

Using CSS/HTML to showcase rows in a vertical table format (or similar)

Can someone please help me with formatting my tabular data in a specific way?

column A | column B | column C | column D |
-------------------------------------------
1-1      | 2-1      | 3-1      | 4-1      |
-------------------------------------------
1-2      | 2-2      | 3-2      | 4-2      |
-------------------------------------------
1-3      | 2-3      | 3-3      | 4-3      |
-------------------------------------------

I have been trying to use standard xhtml but it doesn't display the desired format. The rows are going horizontally instead of vertically, causing the column numbers to increase across rather than down.

Does anyone know how I can achieve the layout shown above? It doesn't necessarily have to be created using tables - CSS with appropriate display types would work just as well.

html css

Answer 1

Answer №1

I'm not convinced that tables are the best approach for achieving your desired layout, but you can create a similar effect by properly styling div elements, as shown below:

HTML:

<div class="content">
    <div class="section">
        <div class="box">
            1-1
        </div>
        <div class="box">
            1-2
        </div>
        <div class="box">
            1-3
        </div>
    </div>
    <div class="section">
        <div class="box">
            2-1
        </div>
        <div class="box">
            2-2
        </div>
        <div class="box">
            2-3
        </div>
    </div>
    <div class="section">
        <div class="box">
            3-1
        </div>
        <div class="box">
            3-2
        </div>
        <div class="box">
            3-3
        </div>
    </div>
</div>

CSS:

.section {float:left;}
.box {height:50px; padding:10px; border:1px solid #ccc;}

Example in JSFiddle: http://jsfiddle.net/abcd1234/

Limitations:

The method above does not guarantee consistent alignment or height for each row like table columns do. This is why the .box class has a fixed height. To achieve this dynamically, you may need to use JavaScript to calculate and set heights for each cell based on the tallest cell within each column.

Answer 2

I'm not convinced that tables are the best approach for achieving your desired layout, but you can create a similar effect by properly styling div elements, as shown below:

HTML:

<div class="content">
    <div class="section">
        <div class="box">
            1-1
        </div>
        <div class="box">
            1-2
        </div>
        <div class="box">
            1-3
        </div>
    </div>
    <div class="section">
        <div class="box">
            2-1
        </div>
        <div class="box">
            2-2
        </div>
        <div class="box">
            2-3
        </div>
    </div>
    <div class="section">
        <div class="box">
            3-1
        </div>
        <div class="box">
            3-2
        </div>
        <div class="box">
            3-3
        </div>
    </div>
</div>

CSS:

.section {float:left;}
.box {height:50px; padding:10px; border:1px solid #ccc;}

Example in JSFiddle: http://jsfiddle.net/abcd1234/

Limitations:

The method above does not guarantee consistent alignment or height for each row like table columns do. This is why the .box class has a fixed height. To achieve this dynamically, you may need to use JavaScript to calculate and set heights for each cell based on the tallest cell within each column.

Answer 3

Answer №2

To achieve the desired effect, wrap each column in a div and apply display:inline-block. The drawback is that you must specify a fixed width and height for each block.

http://example.com/fiddle123

Answer 4

To achieve the desired effect, wrap each column in a div and apply display:inline-block. The drawback is that you must specify a fixed width and height for each block.

http://example.com/fiddle123

Using CSS/HTML to showcase rows in a vertical table format (or similar)

Answer №1

Answer №2

Similar questions

The nb-install mixin is not recognized

Angular 8 carousel featuring a dynamic bootstrap 4 design with multiple images and cards displayed on a single slide

Adding an image to an HTML <span> element using the class attribute "

What steps can be taken to implement a code generation feature on our website?

Changing the size of the logo as you scroll through the page

By employing the pseudo selector ::after, one can enhance the design

Choose the field and set the default value

Is it possible for a Bootstrap modal dialog to overlay another dialog window?

Selenium's XPath locator unable to locate element despite being visible on the browser

Is there a way to use JQuery to make one button trigger distinct actions in two different divs?

Tips for changing the width of a child element in CSS without impacting the parent's width

The div elements are constantly shifting positions when viewed in Internet Explorer

Is there a way to prevent users from copying data or switching tasks when using my program or website?

Having trouble with SVG background image not displaying properly and positioning correctly?

Connecting to an element within a separate node (XSLT)

Ways to verify if a div is empty following an ajax request

Trouble with applying CSS class to checkboxlist

How come inactive links are still able to be clicked on?

Increase the margin for the following item if it has a specific class using CSS

My CSS code is not successfully positioning the items to the right, despite my best efforts