Divide table rows in html without a header into two equal parts, with 50% on the left side

I am trying to format 20 rows in a standard html table without any headers. The current setup looks like this: current situation

<table>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
        ...
        <tr>
            <td>20</td>
        </tr>
    </tbody>
</table>

What I want is to display them in a different way that looks like the following: desired result

I believe using flexbox will help to sort them as 1, 2 on one line and then 3, 4 on the next line, etc.

I have searched extensively but couldn't find a solution that doesn't involve JavaScript or modifying the HTML. I vaguely remember it could be achieved with just a few lines of pure CSS code, but I can no longer locate that resource. Even after searching on Stack Overflow, I had no luck finding the answer. If anyone has any pointers on where I could find the solution, I would greatly appreciate it. Thank you!

htmlcsshtml-tablecss-tables

Answer №1

Here is a creative approach utilizing CSS columns and adjusting the display properties compared to traditional table structures:

table {
  display: block;
}
tbody {
  display: block;
  width: 120px;
  column-count: 2;
  column-gap: 0;
}
tr {
  display: block;
  width: 60px;
  text-align: center;
  border: 1px solid #ccc;
}
td {
  display: inline;
}
<table>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
   <!-- additional content removed for brevity -->
  </tbody>
</table>

Answer №2

Using CSS grid for the task is another option

table,
tbody {
  display: grid;
  grid-auto-flow: dense;
  justify-content: start;
}
table tr {
  grid-column: 1;
}
table tr:nth-child(n + 11) {
  grid-column: 2;
}

/* styling */
tr {
  display: grid;
  place-content: center;
  padding: 2px 5px;
  background:  #f2f2f2;
  border:1px solid;
}

<table>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    ...
    <tr>
      <td>20</td>
    </tr>
  </tbody>
</table>

Answer №3

To achieve the desired effect, ensure that the width is set to 50% and align to the left like this:

    tr {
       float: left;
       width: 50%;
    }


    tr {
       float: left;
       width: 50%;
    }
<table>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
        </tr>
        <tr>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
        </tr>
        <tr>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td>
        </tr>
        <tr>
            <td>10</td>
        </tr>
        <tr>
            <td>11</td>
        </tr>
        <tr>
            <td>12</td>
        </tr>
        <tr>
            <td>13</td>
        </tr>
        <tr>
            <td>14</td>
        </tr>
        <tr>
            <td>15</td>
        </tr>
        <tr>
            <td>16</td>
        </tr>
        <tr>
            <td>17</td>
        </tr>
        <tr>
            <td>18</td>
        </tr>
        <tr>
            <td>19</td>
        </tr>
        <tr>
            <td>20</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

Utilizing Django's For Loop to Enhance Drop Down Menus

I am currently working on a project where I need to loop through a list of user-entered recommendations and convert each one into an item in a dropdown menu. Here is the code snippet I am using for this task Check out the results I am getting so far ...

pythonhtmldjango

What is the best way to adjust the size of a kendo ui combobox?

Is there a way to adjust the width of the kendo ui combobox? My current version is 2012.3.1114 I've attempted to modify it using the following CSS: #options { padding: 30px; } #options h3 { font-size: 1em; font-weight: bold; margin: 2 ...

javascriptjqueryhtmlcsskendo-ui

Guide for assigning a custom style class to a selection field in a Django form

I've been attempting to apply a bootstrap-select class to my choice field, but I keep encountering a 'TypeError: init() got an unexpected keyword argument 'attrs'' error message. class constraintListForm1(forms.Form): region ...

htmldjangodjango-formsbootstrap-4bootstrap-select

Changing the direction of the submenu to the left instead of the right

My Bootstrap 4 menu has a submenu that appears to the right of the main menu. However, since the menu is positioned on the far right of the screen, it gets cut off on the right side. I'm looking for a way to make the submenu appear on the left side o ...

htmlcsstwitter-bootstrap-4

When overflowY is set to auto, the dropdown may be cut off if there are

https://i.sstatic.net/Twcnp.png My col-4 has overflow-y set to auto, but my dropdown gets cut off behind another col when it's open. If I change overflow-y to visible, the dropdown is no longer cut off but the max-height parameter is ignored. const ...

htmlcssreactjsoverflow

Utilizing Selenium with Java, you can hover over a button and choose to click on any of the available options

Currently, I am utilizing Selenium to automate the user interface using Java. Within the UI, there is an action button that, when hovered over by the User, displays two clickable options - Create and Edit. For ease of use, I have stored CSS locators as E ...

javacssseleniummousehover

Issue with the footer not remaining at the bottom of the page

I'm in the process of updating my website and have come across an issue with the footer placement on one specific page. Typically, the footer stays at the bottom of all pages except for this particular page where it appears floated to the left instead ...

htmlcss

I'm stumped on how to resolve this CSS issue

As a beginner with the Angular 8 framework, I am exploring how to incorporate animations using angular animations. Below is an example of what my code currently looks like: The component's parent div is contained within <div class="col-md-5">& ...

htmlcssangularangular-animations

Transmitting data via HTML anchor tags

Is it possible to send POST data using an HTML tag? I'm aware that scripting is usually required, but I've been attempting to achieve this without success. <a class="test" onClick="assign()"><img src='<?php echo $accounts[$i][&a ...

javascripthtmlcakephppostdata

What is the best method to override the CSS transition effect with JavaScript?

I am trying to implement a CSS transition where I need to reset the width of my box in advance every time my function is called. Simply setting the width of the box to zero makes the element shrink with animation, but I want to reset it without any animati ...

javascriptcsstransition

Create a visual layout showcasing a unique combination of images and text using div elements in

I created a div table with 3 images and text for each row, but I'm struggling to make all the text-containing divs uniform in size. How can I achieve this? Also, I need to center this table on the screen, and currently using padding to do so. Is there ...

javascripthtmlcsscss-tables

Image alignment

Currently, I am designing a website that requires an image to be centered in the left side of a div, aligned with the right div which has a background. I attempted a common solution, but unfortunately it is not functioning properly. The design must also be ...

htmlcssimagebootstrap-4

How to Maintain SASS Code Efficiency with Media Queries

How can I avoid repeating myself in my CSS code when using two different media queries for phones and tablets that require the same exact styling? $mobile-portrait: "only screen and (max-width: 680px)"; $tablet-portrait: "only screen and (min-device-wid ...

htmlcsssassmedia-queries

Objects shifting position as the browser window is resized or zoomed

I've scoured through numerous examples, but none seem to work for my specific situation. On my webpage, I have multiple tables nested within a <div>, which serves as a background element (as it doesn't cover the entire screen). However, whe ...

javascriptjqueryhtmlcss

The mobile navigation in HTML has a slight issue with the ::after pseudo-element, specifically within the

As I prepare to launch my website, I have made adjustments to the mobile layout by moving the navigation links to a navigation drawer. The template I am using included JavaScript scripts to handle this navigation change. However, I encountered an issue whe ...

javascriptcsshtmlmiva

New to jQuery: struggling with click event and CSS... What am I missing here?

I have a very simple question for you: $j(".srch-txt").click(function() { $j(this).css("color:" "#155D97") }); $j is used to avoid conflicts It's quite straightforward: I want to change the color of the .srch-txt element to #155D97 when it is click ...

jqueryhtmlcss

The noclose feature in Twitter Bootstrap is malfunctioning when placed within a div

I have a PHP page named a.php that contains the following code: <ul class="dropdown-menu noclose"> This code functions correctly, preventing the drop-down menu from closing until the user clicks outside the box. However, when I load the entire a.p ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Having a Jquery resizing problem? No worries! When the width is less than 768, simply enable the click option. And when the width is

HTML <div class="profile"> <a href="#" class="hoverdropdown" onclick="return false;">Profile</a> <ul class="dropdown" style="display: none;"> <li><a href="#">Dashboard&l ...

javascriptjqueryhtmlcss

Show information in a div when clicked using a data attribute that contains a secondary div with the same data attribute

I have 3 div elements, each containing a unique data attribute: <div class="box"> <div class="item" data-category="#music"> CLICK </div> </div> <div class="box"> <div class="item" data-category="#movies"> CLICK &l ...

phpjqueryhtml

Mobile device scrolling glitch

I'm currently working on my website, which can be found at . After testing it on mobile devices, I came across an issue that I just can't seem to fix. For instance, when viewing the site on a device with 768px width, you can scroll to the righ ...

javascripthtmlcsstwitter-bootstrap-4