-1

enter image description here

I'm not able to align checkboxes with labels under a form & a table.

I went through these answers & some websites too. I'm still not getting it.

How to align checkboxes and their labels consistently cross-browsers

I removed the CSS I wrote, as it didn't work.

td{
    color:#FFFFFF;
    background-color: #548EA3;
    border-spacing: 5px;
    border: 1px solid #FFFFFF;
        }

table,td{
    font-size: 15px;
    font-family: Georgia;
    border-radius: 6px;
    padding: 3px;
        }
    table input{
        width: 98%;
    }
<tr>
        <td>Possible charges involved</td>
        <td>
        <label><input type="checkbox" name="category" id="packing">Packing Charges</label>
        <label><input type="checkbox" name="category" id="Loading">Loading Charges</label>
        <label><input type="checkbox" name="category" id="Transportation">Transportation Charges</label>
        <label><input type="checkbox" name="category" id="Unloading">Unloading Charges</label>
        <label><input type="checkbox" name="category" id="Unpacking">Unpacking Charges</label>
        <label><input type="checkbox" name="category" id="Escort">Escort Charges</label>
        <label><input type="checkbox" name="category" id="Octroi">Octroi Charges</label>
        </td>
    </tr>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Subhadeep
  • 30
  • 9
  • read into [CSS-Grid](https://css-tricks.com/snippets/css/complete-guide-grid/). A a table is the wrong palce to start with – tacoshy Sep 24 '21 at 17:13

2 Answers2

0

css flex is a great and essential tool for building websites in general, you can read about it in here https://css-tricks.com/snippets/css/a-guide-to-flexbox/,

for the code you wrote here i have edited it using css flex

Note: to see the difference try to remove align-items:center.

td{
    /*My Css Edits start*/
    display: flex;
    justify-content: center;
    align-items:center;
    /*My Css Edits end*/
    color:#FFFFFF;
    background-color: #548EA3;
    border-spacing: 5px;
    border: 1px solid #FFFFFF;
        }

table,td{
    font-size: 15px;
    font-family: Georgia;
    border-radius: 6px;
    padding: 3px;
        }
   

<table>
     <tr>
        <td>Possible charges involved</td>
        <td>
        <label>Packing Charges</label>
        <input type="checkbox" name="category" id="packing">
        </td>
   </tr>
  </table>
Kareem_Alzein
  • 61
  • 6
  • Thank you for helping @Kareem. I don't want to organise the checkboxes horizontally. Instead, I want them to be as it is but in a straight line. Do you know how to do that ? :) – Subhadeep Sep 24 '21 at 19:10
  • @Subhadeep i didn't get what are you looking for??! , i thought you wanted the label aligned with the checkbox – Kareem_Alzein Sep 24 '21 at 19:16
  • I got it, Sir. allow me to edit your answer. :) – Subhadeep Sep 24 '21 at 19:45
0

enter image description hereusing input width as 98%. That's why it's coming like that. Removing the mentioned CSS & using the width property with another selector is doing the job.

like I was using width 98% for "select your current city". I've assigned a class to that. and used that. removing this CSS does the job.

table input{
width: 98%;
}
Subhadeep
  • 30
  • 9