Fri. Mar 17th, 2023

[ANSWERED] html – unable to reduce space between table rows

By

Nov 18, 2022 css, html, html-table

Solution 1 :

This can be achieved by merging you checkbox code with the table. Here, I have updated the 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>

Problem :

I’m working on an app where I have a table with rows and columns and a container of checkboxes in the format of the image below :

The problem is that I want the letters A , B , C , D which represent each row to align on the same height with my checkboxes and by reducing margin or padding between the letters I see no difference so I need your help

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>

Comments

Comment posted by Paulie_D

Why not use a single table that included the inputs?…that would be logical to construct this

Comment posted by SeeoX

You are using a

Comment posted by vasilis 123

@Paulie_D I didn’t know how to put checkboxes as table rows

Comment posted by SeeoX

Could you explain why this answer his question?

Comment posted by Deeksha Gupta

He needs to align the checkbox with the rows so we can merge the checkbox code with the table which will result the same. Could you explain why this doesn’t answer?

Comment posted by meta.stackoverflow.com/questions/258673/…

This answers the question, but is it easily understandable? About code only answer :

Comment posted by Deeksha Gupta

I have updated the comment is that understandable or more clarification is required.

By

Related Post

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

Nov 20, 2022

[ANSWERED] python – Extract text from a class in HTML using CSS language

Nov 20, 2022

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022