Is there a more effective method to construct this 3x2 "table" using DIVS?
I'm considering using traditional tables code
<table>
since it's simpler, but modern practice leans towards Divs. So, what is the most polished approach to achieve a layout like this?
I've always been curious why tables fell out of favor, I used to build websites exclusively with tables (a while back).
Here is a straightforward solution:
div {
width: 33%;
float: left;
border: 1px solid black;
height:100px;
}<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>To optimize your layout for IE10+ compatibility, consider implementing flexbox:
*,*:before,*:after{
box-sizing: border-box;
}
.container{
border: 1px solid black;
display: flex;
flex-wrap: wrap;
}
.cell{
width: 33.33%;
height: 100px;
border: 1px solid black;
}<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>If you want to experiment with this code, visit the following link - http://codepen.io/braican/pen/QbdbYb
For an interactive example, you can visit this link
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container{
display:table;
width:100%;
}
.box{
display:table-cell;
border:1px solid;
height: 100px;
}
Within a single table, I have incorporated a dynamic drop-down list that spans over 7 days. Additionally, I have implemented a "+" button that allows for the creation of additional rows dynamically for each day. Each row within the table features a checkb ...
I need to implement a custom directive within the template of another custom directive. Here are the code snippets for reference: Issue with Scenario 1 angular.module('myApp') .directive('customOnChange', function () { return { r ...
In search of a solution to create two columns with equal height and center-aligned content within each column, while also maintaining different widths. Issue: The challenge lies in achieving both 'equal height' and 'middle aligned' at ...
I'm trying to include a form from another file using ajax. It's a simple form that is activated by an onclick event defined as follows: <a href="javascript:void(0);" class="remitir" title="Reemitir Solicitud" data-id="'.$value['idso ...
React v15 has made a change where elements of arrays in JSX are now rendered as <!--react-text:some_id-->text<!--/react-text--> instead of spans. I've searched for a solution but haven't been able to figure out how to apply CSS styles ...
It's clear that the PLAY/PAUSE icons are smaller than intended, and the entire player is thinner than desired, making it difficult for some viewers to see. How can I enlarge the entire player? I have read that we do not have access to individual contr ...
I have a desire to create a button within a web browser that, when clicked, will either copy the current URL address into a file or open another web browser and paste it there. Being new to programming, I am unsure of which language to use for this task. ...
There is a peculiar issue with the SVG graphic displayed on my webpage. On some computers, the complex linearGradient filling a Rect does not display all the Stops correctly, while on other computers it appears fine. I discovered that if I disable "GPU ra ...
Trying to create a layout I like for this form has been a bit of a struggle. I thought I had something good at first, but after the first row of input, the formatting gets all messed up and I can't figure out what's going wrong. <!DOCTYPE htm ...
I am currently working on a form that includes two select options; one for logo design and another for letterhead design. Users should be able to choose the quantity of each design, or both if they wish. For example, a user could select 2 logo designs and ...
let userTable = $("#user_table").DataTable({ 'sDom': '<"row-drop"<"col-sm-12 row"lr>><"row"t><"row-pager"<"col-sm-12 col-md-5"i><"col-sm-12&qu ...
I have been experimenting with creating a dynamic navbar that remains at the top of a webpage. Here's what I have so far: <style> .sticky-nav-wrapper > div { color: #000000; display: inline-block; display: -moz-inline-box; * ...
Currently, I am facing an issue with two elements on my page: .start_over_button and .speed_buttons. In CSS, the .start_over_button is set to display: none, and in my JavaScript code, I have it so that when .speed_buttons are clicked, they fade out and the ...
One issue I encountered was that the buttons weren't scrolling me to the top of the anchor, instead scrolling too far into the section due to the fixed navbar overlapping. I tried solving it with margins and paddings but believe there must be a simpl ...
Currently, I am attempting to enhance an existing project that was graciously created for me. I must admit, I am quite new to this, so please be patient with me! In my project, there are 9 buttons, each triggering the display of a different image upon bei ...
I have a CSS-defined header with the following properties: .page-header { display: flex; flex-direction: row; justify-content: space-between; align-content: stretch; align-items: center; padding: 5px 5px 5px 20px margin-left: auto; margin-r ...
I am attempting to center align some links within my div, while also ensuring that the text of the links is aligned to the left. However, I have been unsuccessful in achieving this. I can either align them to the left or center, but not both simultaneousl ...
I am having trouble with the file uploader from Material-UI. It doesn't seem to be working properly when I try to select a file. Does anyone have any suggestions on how to handle the input from the file selector? <FlatButton icon={< ...
I am facing an issue with a simple script I have created. The script is supposed to display a specific div when a user clicks on a link, and hide all other divs in the container. However, when I click on the link, nothing gets hidden as expected. Even afte ...
My issue is with the development of my website. When I access it on my PC, everything looks fine. However, when I try to visit the site on my iPhone, there is a noticeable difference in the output. The space above the navigation bar appears differently whe ...