Is it possible to create this using CSS instead of <table>?

I am currently in the process of building a website based on design mock-ups created in Photoshop.

One particular element I am working on is a question form. While I understand that HTML tables can be used to create this, I would prefer to utilize CSS as tables are typically reserved for displaying data.

I am exploring the possibility of using 3 separate columns for the radio buttons, titles, and text boxes respectively. However, I am facing difficulty in aligning the features properly (for example, getting the "Account" radio button to align with the "Name" title and its corresponding text box).

Would it be more appropriate to achieve this layout using CSS or should I resort to using a table?

htmlcss

Answer №1

You have the ability to utilize

  • display:table; for <table>
  • display:table-row; for <tr>
  • display:table-cell; for <td> within a div structure

Take a look at this demonstration (featuring a comparison between css table and html table for better comprehension)

CSS for experimentation

body{
     height:100%;
}
#main{
    height:100%;
    width:100%;

}
.table{
    display:table;
    width: 100%;
}
.tr{
    display:table-row;
}
.td{
    display:table-cell;
}



UPDATE

To achieve the layout depicted in your image, you can refer to this demo

CSS

body {
    height:100%;
}
#main {
    height:100%;
    width:100%;
}
.table {
    display:table;
    width: 100%;
}
.tr {
    display:table-row;
}
.td {
    display:table-cell;
}
.td > span {
    display:list-item;
    list-style:none;
}
.td3 >span {
    background:grey;
    height:16px;
    font-size:10px;
}

HTML

<div id="main">
    <div class="table">
        <div class="tr">
            <div class="td td1"> <span>Project </span>  <span>Account</span>  <span>General bsns</span> 
            </div>
            <!-- //td -->
            <div class="td td2"> <span>Ref</span>  <span>Tite</span>  <span>Name</span> 
            </div>
            <!-- //td -->
            <div class="td td3"> <span>Insert Project Ref</span>  <span>Insert Project Title</span>  <span>Insert Account Nama</span> 
            </div>
            <!-- //td -->
        </div>
        <!-- //tr -->
    </div>
</div>

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

Use ajax request to serialize input into HTML value

I implemented a jquery.ajax post request to send data to the server using C#, however, I encountered an error with my code. Here is the code snippet: $(function(){ $('#frmSubmit').on('submit', function(e){ e.preventDefault(); ...

javascriptc#jqueryhtmlajax

Distribute the elements evenly between two separate divs

Hello everyone! I have a unique challenge that I hope someone can help me with. I have a list of links to various tests, but different sections require these links to be displayed in different ways. One section needs them spread over two columns, while an ...

htmlcsslist

What are some ways in which UI frameworks such as Angular and Vue facilitate event $emitting?

After spending a year working with Angular2/6, I decided to try my hand at VueJS for a small assignment. It's never too late to learn something new. I noticed that both Angular and Vue utilize something similar in Native JS to pass events from child ...

javascripthtmlangularvue.jsvuejs2

Basic stacked or segmented bar in HTML

Instead of starting from scratch, I'm in search of insights on how to develop a stacked/segmented bar or find an existing control for this purpose. Here are my requirements: Horizontal bar Standard html Color-coded segments using CSS Segments propor ...

c#asp.nethtml

Customizing the colors of an Ant Design header

I am currently attempting to modify the background color of the entire header in antdesign. I believe the file containing the default settings can be found here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less Upo ...

cssreactjsnext.jslessantd

Updating the price in real-time using JavaScript or jQuery based on the selected option

I am seeking a way to dynamically update the content of a span that is meant to show the price of the selected option. Just a note, I am utilizing Django + Python for generating the options. Below is my code snippet : <select class="form-control" id=" ...

javascriptjqueryhtmldjangodynamic

Cancel an AJAX request without interfering with the subsequent request

When working with a number input and the "onChange" event, I have come across an issue with my ajax request. Upon aborting the request, it seems to have a negative impact on subsequent requests. If I send just one request without aborting, everything runs ...

javascriptjqueryhtmlajaxxmlhttprequest

Creating a triangle above a square: Step-by-step guide

https://i.sstatic.net/DdJ5oRz4.png I am attempting to design a square with a triangle resting on top. While I have made some progress, the code below is the closest I could get: .square { width: 20px; height: 20px; background: #FF0000; outline: ...

htmlcss

What is the process to obtain the new top and left coordinates of a child div within a parent div that has been rotated?

I'm attempting to utilize the updated top and left positions of a child div within a rotated parent in order to restrict the draggable area of the parent itself. I am implementing jquery draggable for this purpose. EDIT: You can find the <a href= ...

javascriptjquerycss

The script fails to function properly following the retrieval of the HTML file, causing the JavaScript to execute only once

In my current project, I am working on fetching an HTML file and replacing the body content with the fetched file. The setup involves two files - index.html and result.html. I have successfully managed to switch the content based on a matching search resul ...

javascripthtmlajaxfetch-api

Navigating through columns in Coldfusion with the corresponding values in the rightful sequence

When working with data from a query, I always prefer to dynamically generate columns in a table instead of hardcoding them. The code below is something I modified from another source. My goal is not only to retrieve the column names in order but also obtai ...

htmlsqlcoldfusion

Django application encounters a 404 error while trying to access the CSS file within the media

Within my Django application, I have configured the following settings: settings.py ------------ MEDIA_ROOT = '/home/me/dev/python/django/myproject/myapp/media/' MEDIA_URL = '/site_media/' urls.py -------- ... url(r'^myapp/' ...

pythoncssdjangohttp-status-code-404

Verify whether the element is capable of being scrolled sideways

Is it possible to add indicators to a div to show users that they can scroll left or right within the content? I need a way to detect if the element can be scrolled to either side, so that I can display the appropriate indicator. For example, when there is ...

javascriptjquerycss

Unable to activate/deactivate the form components on a Grails webpage

I have multiple forms and buttons on a single page in my Grails application. What I'm trying to achieve is the ability to hide and show different forms on the page using an enable button with jQuery. I attempted to use ID selectors, but this resulted ...

jqueryhtmltemplatesgrails

Access the content of each cell in a table using JavaScript

I need help with a scenario involving a table that has 4 rows, where the 4th row contains a textbox. When the "onchange" event of the textbox is activated, I want to retrieve the data from the cells in that specific row and transfer it to another table. It ...

javascripthtml

inventory items - 6 articles listed in the initial column

I am trying to organize my list into two columns, with the first column containing 6 items. How can I achieve this layout instead of having the content split evenly between the columns? ul { columns: 2; column-count: 2; height: 800p ...

htmlcss

Identify changes in a select element using JQuery

I have a Jqgrid that is capable of dynamically generating selects similar to the following: <select id="win" style="width: 65px;"> <option value="">-WIN?</option> <option value="1&qu ...

jqueryhtmljqgridtriggers

The element is spilling over the height of the page

I'm currently working on a webpage with a fixed width and height. Although I'm incorporating hover effects, I'm encountering an issue where the vertical overflow of the page is not set to 100% (100vh). What could be causing this problem an ...

htmlcsshoveroverflow

The Bootstrap navigation menu is not responsive as expected

Below is the HTML code for the navbar: <nav class="navbar navbar-light" style="background-color: #967BB6;"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" ...

javascripthtmlcsstwitter-bootstrap

Issues with Html Video ogg Playback

Hey everyone, I'm having some trouble trying to use an OGG video in Firefox while using Meteor. It works fine with MP4 files, but for some reason, I keep getting an error with OGG. Error HTTP “Content-Type” of “text/html” is not supported. ...

htmlfirefoxmeteorvideo