unable to decrease the gap between the rows of the table

I'm currently developing an application that involves a table with rows and columns, along with a checkbox container arranged as shown in the image below:

https://i.stack.imgur.com/QoVrg.png

One issue I'm facing is getting the letters A, B, C, D (which correspond to each row) to align at the same height as my checkboxes. Despite adjusting margins and padding between the letters, I haven't seen any visible changes. Any assistance would be greatly appreciated.

Here's a snippet of my code:

.checkboxes-container{
  position: absolute;
  width:620px;
  height:240px;
  left:25%;
  top:42%;
  display:flex;
  justify-content: flex-start; 
}

.checkbox-container{
  background-color:teal;
  width:230px;
  height:100%;
  display:flex;
  flex-flow:row wrap;
  justify-content:flex-start;
}


.checkbox-container div{
  flex-basis:100%;
}



.business-bx{
  margin-top:17px;
  transform:scale(1.5);  
}

.business-bx:not(:first-child){
  margin-left:38px;
}

.business-bx:first-child{
  margin-left:10px;
}


.table tbody tr td:first-child {
  font-weight:bold;
}

.table {
  border-spacing: 3em;
}


.letter{
  font-size:20px;
  padding:0;
}
<div class="table-container">
  <table class="table">
    <thead>
      <tr>
        <td></td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>


      </tr>
    </thead>
    <tbody>
      <tr class="letter">
        <td>A</td>

      </tr>
      <tr class="letter">
        <td>B</td>

      </tr>
      <tr class="letter">
        <td>C</td>

      </tr>
      <tr class="letter">
        <td>D</td>

      </tr>
    </tbody>
  </table>
</div>

<div class="checkboxes-container">
  <div class="checkbox-container business-boxes">
    <div>
      <input type="checkbox" class="business-bx">
      <input type="checkbox" class="business-bx">
      <input type="checkbox" class="business-bx">
      <input type="checkbox" class="business-bx">
    </div>
    <div>
      <input type="checkbox" class="business-bx">
      <input type="checkbox" class="business-bx">
      <input type="checkbox" class="business-bx">
      <input type="checkbox" class="business-bx">
    </div>
    <div>
      <input type="checkbox" class="business-bx">
      <input type="checkbox" class="business-bx">
      <input type="checkbox" class="business-bx">
      <input type="checkbox" class="business-bx">
    </div>
    <div>
      <input type="checkbox" class="business-bx">
      <input type="checkbox" class="business-bx">
      <input type="checkbox" class="business-bx">
      <input type="checkbox" class="business-bx">
    </div>

  </div>


</div>

htmlcsshtml-table

Answer №1

To enhance the functionality of your checkbox code, you can integrate it with a table structure. Below is the modified code:

tbody>tr>td:not(:first-child) {
    background-color: teal;
    padding:20px;
}
tbody>tr>td{
    padding-right:5px;
}
thead>tr>td{
    text-align: center;
}
table{border-collapse: collapse;}
<div class="table-container">
    <table class="table">
        <thead>
            <tr>
                <td></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </thead>
        <tbody>
            <tr class="letter">
                <td>A</td>
                <td><input type="checkbox" class="business-bx"></td>
                <td><input type="checkbox" class="business-bx"></td>
                <td><input type="checkbox" class="business-bx"></td>
                <td><input type="checkbox" class="business-bx"></td>
            </tr>
            <tr class="letter">
                <td>B</td>
                <td><input type="checkbox" class="business-bx"></td>
                <td><input type="checkbox" class="business-bx"></td>
                <td><input type="checkbox" class="business-bx"></td>
                <td><input type="checkbox" class="business-bx"></td>
            </tr>
            <tr class="letter">
                <td>C</td>
                <td><input type="checkbox" class="business-bx"></td>
                <td><input type="checkbox" class="business-bx"></td>
                <td><input type="checkbox" class="business-bx"></td>
                <td><input type="checkbox" class="business-bx"></td>
            </tr>
            <tr class="letter">
                <td>D</td>
                <td><input type="checkbox" class="business-bx"></td>
                <td><input type="checkbox" class="business-bx"></td>
                <td><input type="checkbox" class="business-bx"></td>
                <td><input type="checkbox" class="business-bx"></td>
            </tr>
        </tbody>
    </table>
</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

What could be causing the embedded dropdown to automatically select the initial option every time?

I am encountering an issue with a page that includes an html table rendered using node with express and ejs. The table contains a select dropdown in one of the cells, and it populates correctly with the right values. However, regardless of which option I ...

javascriptjqueryhtmlmysqlnode.js

Is it possible to nest CSS Variables within CSS Variable names?

Is it feasible to embed a CSS Variable inside another CSS variable's name or perform a similar action like this: :root { --color-1: red; --index: 1; } span { color: var(--color-var(--index)) } ...

csscss-variables

Modifying the color of a div element solely through CSS styling

I am currently working with a set of buttons, available at this link. While browsing through this helpful post, I encountered an issue. Whenever I click on another element, the orange color of my button disappears. How can I maintain the orange color on t ...

htmlcssangular

I’m currently working on my webpage, utilizing HTML, CSS, and Bootstrap 4. I’ve encountered an issue where a slide keeps appearing at the bottom, but I’m

Improving HTML and Bootstrap: // Extra small devices (portrait phones, less than 576px) // No media query since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices ( ...

htmlcsstwitter-bootstrapbootstrap-4

Creating JavaScript functions that accept three inputs and perform an operation on them

Apologies in advance if there are any silly mistakes as I am new to Javascript. I want to add "salary", "pension", and "other" together, then display the result in an input field when a button is clicked. Not sure if I have used the correct tags in my cod ...

javascripthtml

The content within the iframe is not displayed

I've set up a dropdown menu with separate iframes for each option. Here's the code I used: $(function(){ $('#klanten-lijst').on('change',function(){ $('#klanten div').hide(); $('.klant-'+t ...

javascripthtmlcssiframe

Extract the directory name from a URL using PHP, excluding any file names or extensions

Can anyone guide me on extracting the folder name only from a URL in PHP? For example, if my URL is I'm interested in retrieving just the part of the URL. Any suggestions on how to achieve this would be much appreciated. Thanks! ...

phphtmlurl

Adjust the class of the iframe element when clicked

I am attempting to change the class of an iframe (soundcloud embedded track) when it is clicked, in order to apply different properties. However, my code doesn't seem to be working as expected. Here is what I have: Here is a snippet from my index.htm ...

javascriptjquerycsshtmliframe

What is the best way to retain data after clicking a button?

I am facing an issue where I need to figure out how to add information to a new page when a button is clicked. For example, let's say I have an "add to cart" button and upon clicking it, I want to store some data. How can I achieve this functionality? ...

javascripthtmlcss

Empty the password field

<input name="e_password" id="e_password" type="password" autocomplete="off" /> The password field above is causing some trouble as it gets automatically filled in Mozilla, but not in Chrome and IE11. This seems to be retaining values from previous a ...

javascriptjqueryhtml

Internet Explorer 11 Freezes Unexpectedly with Dynamic SVG Components

Lately, I developed a unique SVG Icon control for the new html application at my workplace. However, our quality department started noticing that IE 11 would intermittently "crash" while using the application after its implementation. I'm not convinc ...

javascripthtmlsvgknockout.jsinternet-explorer-11

How to position a static element using CSS

I'm trying to align an image in the center of the screen, but I've run into some trouble. Typically, this is easy by setting the width of a div and using margin: auto;. However, I also need the div to have the position: fixed; property, which see ...

htmlcsspositionfixed

Image element for Material UI CardMedia

There is a component in Material UI called CardMedia that allows for media content within a Card. The Mui website showcases an example using the img tag with CardMedia. https://mui.com/material-ui/react-card/#complex-interaction I am interested in using ...

htmlreactjsmaterial-uijsx

JavaScript library unsuccessful in transferring data to PHP script

I am facing an issue while trying to transfer variables from javascript to a php file for execution. The problem is that the php file is not being called or executed, even though I have confirmed that it works properly when tested individually. $(function ...

phpjavascriptjqueryhtml

Troubleshooting: Unable to Display Collapsing Navbar in Bootstrap 5 When Toggler is Pressed

My attempt at creating a collapsing navbar isn't working as expected, and I'm struggling to identify the issue. I have set up a collapse toggler that should target #navbar1. However, when I shrink the page, the Navbar collapses, the .navbar-togg ...

cssbootstrap-5

jQuery-powered responsive layout with three columns

I am currently working on creating a dynamic three-column layout that allows users to resize the columns in their browser. Using jQuery for column resizing, I have successfully adjusted the first two columns but am encountering difficulties with the final ...

jquerycssdynamicresponsive-designmultiple-columns

The Google Closure Compiler Service is providing faulty code

I've been using Closure Compiler through to minify and obfuscate my JavaScript code, but I seem to be encountering an issue. To troubleshoot, I created a test page with a script. Here's the HTML5 code snippet: <!DOCTYPE html> <html> ...

javascriptjqueryhtmlgoogle-closure-compilervelocity.js

Ion-List seamlessly integrates with both ion-tabs and ion-nav components, creating a cohesive and dynamic user interface

On my homepage, there is an ion-list. Sometimes (not every time), when I select an item in this list or navigate to the register page using "this.app.getRootNav().push("ClienteCadastroPage")", and then select an input in the registerPage or descriptionPage ...

htmltypescriptionic-framework

Nested min-height in HTML is crucial for ensuring that parent

HTML: <div id="a"> <div id="b> </div> </div> CSS: html, body { height: 100%; background: red; margin: 0; } #a { min-height: 100%; background: green; } #b { min-height: 100%; background: y ...

htmlcss

ensuring that all items in the owl Carousel have equal heights

My current project involves creating an Owl Carousel. Here is the code I have implemented so far: <div class="owl-carousel owl-theme"> @foreach (var item in Model.Books) { <div class="item"> ...

htmlcssbootstrap-4owl-carouselowl-carousel-2