I have a number of labels and their textfields and their corresponding checkbox like below.
I want to align them in the center and proper spacing between them.
Here's the fiddle where I am trying.
For my screen at the moment, there's no distance between the text fields.
<div class="col-sm-4">
<table>
<tbody><tr>
<td><label for="">Design number</label></td>
<td><input type="text" name="Design number" value="SK123"></td>
</tr>
<tr>
<td><label for="">Price</label></td>
<td><input type="text" name="Price" value="500"><br><br></td>
</tr>
<tr>
<td><label for="">Never Out Of Stock</label></td>
<td><label><input type="checkbox" value=""><br><br></label></td>
</tr>
<tr>
<td><label for="">Pattern</label></td>
<td>
<label> <input type="checkbox" value="">Stripes<br></label>
<label><input type="checkbox" value="">Checks<br></label>
<label><input type="checkbox" value="">Prints<br></label>
<label><input type="checkbox" value="">Solid<br></label>
</td>
</tr>
<tr>
<td><label for="">Color</label></td>
<td>
<br><br>
<label><input type="checkbox" value="">White<br></label>
<label><input type="checkbox" value="">Blue<br></label>
<label><input type="checkbox" value="">Green<br></label>
<label><input type="checkbox" value="">Red<br></label>
<label><input type="checkbox" value="">Yellow<br></label>
</td>
</tr>
<tr>
<td><label for="">Occasion</label></td>
<td>
<br><br>
<label><input type="checkbox" value="">Casual<br></label>
<label><input type="checkbox" value="">Fancy<br></label>
<label><input type="checkbox" value="">Office<br></label>
</td>
</tr>
<tr>
<td><label for="">Fabric</label></td>
<td>
<br><br>
<label><input type="checkbox" value="">Silk<br></label>
<label><input type="checkbox" value="">Denim<br></label>
<label><input type="checkbox" value="">Velvet<br></label>
</td>
</tr>
</tbody>
</table>
</div>
Here a good (I hope) format of your code:
table {
width:800px;
}
table td {
width:70%;
padding-bottom: 5px;
padding-top: 5px;
border-bottom:solid 1px #dddddd;
/* text-align: center; <---- If you want all aligned to the center. */
}
table td:first-child {
width:30%;
}
label {
min-width:75px;
margin-left:10px;
}
input[type="checkbox"] {
margin-right:5px;
}
I have removed the "br" tag and add spaces.
The JSFiddle
<div class="col-sm-4">
<table>
<tbody>
<tr>
<td><label for="">Design number</label></td>
<td><input type="text" name="Design number" value="SK123"></td>
</tr>
<tr>
<td><label for="">Price</label></td>
<td><input type="text" name="Price" value="500"></td>
</tr>
<tr>
<td><label for="">Never Out Of Stock</label></td>
<td><input type="checkbox" value=""></td>
</tr>
<tr>
<td><label for="">Pattern</label></td>
<td>
<label><input type="checkbox" value="">Stripes</label>
<label><input type="checkbox" value="">Checks</label>
<label><input type="checkbox" value="">Prints<br></label>
<label><input type="checkbox" value="">Solid<br></label>
</td>
</tr>
<tr>
<td><label for="">Color</label></td>
<td>
<label><input type="checkbox" value="">White<br></label>
<label><input type="checkbox" value="">Blue<br></label>
<label><input type="checkbox" value="">Green<br></label>
<label><input type="checkbox" value="">Red<br></label>
<label><input type="checkbox" value="">Yellow<br></label>
</td>
</tr>
<tr>
<td><label for="">Occasion</label></td>
<td>
<label><input type="checkbox" value="">Casual<br></label>
<label><input type="checkbox" value="">Fancy<br></label>
<label><input type="checkbox" value="">Office<br></label>
</td>
</tr>
<tr>
<td><label for="">Fabric</label></td>
<td>
<label><input type="checkbox" value="">Silk<br></label>
<label><input type="checkbox" value="">Denim<br></label>
<label><input type="checkbox" value="">Velvet<br></label>
</td>
</tr>
</tbody>
</table>
</div>
Look fiddle : https://jsfiddle.net/4xrfw842/1/
Edit your html code
<div class="col-sm-4">
<table>
<tbody><tr>
<td><label for="">Design number</label></td>
<td><input type="text" value="SK123" name="Design number"></td>
</tr>
<tr>
<td><label for="">Price</label></td>
<td><input type="text" value="500" name="Price"><br><br></td>
</tr>
<tr>
<td><label for="">Never Out Of Stock</label></td>
<td><label><input type="checkbox" value=""></label></td>
</tr>
<tr>
<td><label for="">Pattern</label></td>
<td>
<label> <input type="checkbox" value="">Stripes<br></label>
<label><input type="checkbox" value="">Checks<br></label>
<label><input type="checkbox" value="">Prints<br></label>
<label><input type="checkbox" value="">Solid<br></label>
</td>
</tr>
<tr>
<td><label for="">Color</label></td>
<td>
<label><input type="checkbox" value="">White<br></label>
<label><input type="checkbox" value="">Blue<br></label>
<label><input type="checkbox" value="">Green<br></label>
<label><input type="checkbox" value="">Red<br></label>
<label><input type="checkbox" value="">Yellow<br></label>
</td>
</tr>
<tr>
<td><label for="">Occasion</label></td>
<td>
<label><input type="checkbox" value="">Casual<br></label>
<label><input type="checkbox" value="">Fancy<br></label>
<label><input type="checkbox" value="">Office<br></label>
</td>
</tr>
<tr>
<td><label for="">Fabric</label></td>
<td>
<label><input type="checkbox" value="">Silk<br></label>
<label><input type="checkbox" value="">Denim<br></label>
<label><input type="checkbox" value="">Velvet<br></label>
</td>
</tr>
</tbody></table>
</div>
https://jsfiddle.net/4xrfw842/5/
Related
I am dealing with a really weird error, this is my table:
But if i select something in the first row, and if i want to select something in the second row, then my selection in the first row goes away. so basically i need each row to be a separate radio group. Here is my code:
<table class="table table-bordered table-striped infoTable">
<tbody>
<tr>
<td>Ownership</td>
<td>
<input name="Test" type="radio" value="A" id="Same" />
</td>
<td>
<input name="Test" type="radio" value="B" id="Same1" />
</td>
<td>
<input name="Test" type="radio" value="C" id="Same2"/>
</td>
<td>
<input name="Test" type="radio" value="D" id="Same3"/>
</td>
</tr>
<tr>
<td>Management Control - Board Participation
</td>
<td>
<input name="Test" type="radio" value="A" id="Same4"/>
</td>
<td>
<input name="Test" type="radio" value="B" id="Same5"/>
</td>
<td>
<input name="Test" type="radio" value="C" id="Same6"/>
</td>
<td>
<input name="Test" type="radio" value="D" id="Same7"/>
</td>
</tr>
<tr>
<td>Management Control - Employee Structure
</td>
<td>
<label><input name="Test" type="radio" value="A" /></label>
</td>
<td>
<label><input name="Test" type="radio" value="B" /></label>
</td>
<td>
<label><input name="Test" type="radio" value="C" /></label>
</td>
<td>
<label><input name="Test" type="radio" value="D" /></label>
</td>
</tr>
You have only to change the name of inputs, like that.
<tbody>
<tr>
<td>Ownership</td>
<td>
<input name="Test" type="radio" value="A" id="Same" />
</td>
<td>
<input name="Test" type="radio" value="B" id="Same1" />
</td>
<td>
<input name="Test" type="radio" value="C" id="Same2"/>
</td>
<td>
<input name="Test" type="radio" value="D" id="Same3"/>
</td>
</tr>
<tr>
<td>Management Control - Board Participation
</td>
<td>
<input name="Tes" type="radio" value="A" id="Same4"/>
</td>
<td>
<input name="Tes" type="radio" value="B" id="Same5"/>
</td>
<td>
<input name="Tes" type="radio" value="C" id="Same6"/>
</td>
<td>
<input name="Tes" type="radio" value="D" id="Same7"/>
</td>
</tr>
<tr>
<td>Management Control - Employee Structure
</td>
<td>
<label><input name="Te" type="radio" value="A" /></label>
</td>
<td>
<label><input name="Te" type="radio" value="B" /></label>
</td>
<td>
<label><input name="Te" type="radio" value="C" /></label>
</td>
<td>
<label><input name="Te" type="radio" value="D" /></label>
</td>
</tr>
You have to keep only name different for different set of radio button.
<table class="table table-bordered table-striped infoTable">
<tbody>
<tr>
<td>Ownership</td>
<td>
<input name="Test" type="radio" value="A" id="Same" />
</td>
<td>
<input name="Test" type="radio" value="B" id="Same1" />
</td>
<td>
<input name="Test" type="radio" value="C" id="Same2" />
</td>
<td>
<input name="Test" type="radio" value="D" id="Same3" />
</td>
</tr>
<tr>
<td>Management Control - Board Participation
</td>
<td>
<input name="Test_1" type="radio" value="A" id="Same4" />
</td>
<td>
<input name="Test_1" type="radio" value="B" id="Same5" />
</td>
<td>
<input name="Test_1" type="radio" value="C" id="Same6" />
</td>
<td>
<input name="Test_1" type="radio" value="D" id="Same7" />
</td>
</tr>
<tr>
<td>Management Control - Employee Structure
</td>
<td>
<label><input name="Test_2" type="radio" value="A" /></label>
</td>
<td>
<label><input name="Test_2" type="radio" value="B" /></label>
</td>
<td>
<label><input name="Test_2" type="radio" value="C" /></label>
</td>
<td>
<label><input name="Test_2" type="radio" value="D" /></label>
</td>
</tr>
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>
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>
<html>
<table width="45%"><tr><td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh</td>
<td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh kunenaddsfsdfasdfasdfa</td></tr>
<tr><td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh</td>
<td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh kunenaddsfsdfasdfasdfa</td></tr>
</table></html>
I want second check box name is to large, it should align properly below the name .
It should start from the name not form checkbox
you can use additional element - label, like this:
HTML:
<table width="45%">
<tr>
<td>
<input type="checkbox" name="mahesh1" value="mahesh"/>Mahesh
</td>
<td>
<input type="checkbox" id="maesh1" name="mahesh1" value="mahesh"/>
<label for="maesh1"> Mahesh kunenaddsfsdfasdfasdfa</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mahesh2" value="mahesh"/>Mahesh
</td>
<td>
<input type="checkbox" id="maesh2" name="mahesh2" value="mahesh"/>
<label for="maesh2"> Mahesh kunenaddsfsdfasdfasdfa</label>
</td>
</tr>
css:
label {
display: block;
white-space: nowrap;
}
fiddle:
http://jsfiddle.net/ywg632c3/2/
I have a 4x4 table of radiobuttons. In the first row (an extra row ABOVE the 4x4) I would like a button centered horizontally. I have tried colspan etc. but all still leave the radiobutton in a column like the others, and thus uncentered.
Obligatory Table-less Answer:
<div>
<div class="center"><input type='button' value='hello' /></div>
<ul class="radioList">
<li>
<label for="radio1">
<input type="radio" id="radio1" />
Checkbox 1</label>
</li>
<li>
<label for="radio2">
<input type="radio" id="radio2" />
Checkbox 2</label>
</li>
<li>
<label for="radio3">
<input type="radio" id="radio3" />
Checkbox 3</label>
</li>
<li>
<label for="radio4">
<input type="radio" id="radio4" />
Checkbox 4</label>
</li>
</ul>
</div>
.center { text-align:center; }
.radioList {
list-style:none;
width:100%;
}
.radioList li {
float:left;
width:25%;
}
http://jsfiddle.net/Amudt/
http://jsfiddle.net/EJbny/
<table style='width:100%;' border=1>
<tr>
<td colspan=4 style='text-align:center;'><input type='button' value='hello'></td>
Like this? Just use CSS and the text-align:center rule on the top row. Here's a jsFiddle example.
<table>
<tr>
<td colspan="4" style="text-align:center"><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
</table>
I have an html table
For some reason, in the second row, the two cells are not horizontally aligned. What is the cause of this?
<input type="checkbox" id="3" onClick="change(this)" checked="">
<label for="2"><font color="800080"> Ice Cover (Days)</font></label></p>
In this cell you have label for input with id="2" but in cell is input id="3" change with <label for="3">
this should fix it. you had an extra td tag and an extra br tag in there, and I also gave the title of the table its own row.
<div id="menu" STYLE="position:absolute; left:25px">
<!--toggles visibility of graph lines-->
<table>
<tr>
<td>
<p><b>Display: </b>
</td>
</tr>
<tr>
<td><input type="checkbox" id="0"
onClick="change(this)" checked="">
<label for="0"> <font color="556b2f">Freeze up (Julian Days)</font></label>
</td>
<td><input type="checkbox" id="1"
onClick="change(this)" checked="">
<label for="1"> <font color="000080">Break up (Julian Days)</font></label>
</td>
</tr>
<tr>
<td><input type="checkbox" id="2"
onClick="change(this)" checked="">
<label for="2"><font color="2e8b57"> Max Ice Thickness (cm)</font></label>
</td>
<td><input type="checkbox" id="3"
onClick="change(this)" checked="">
<label for="2"><font color="800080"> Ice Cover (Days)</font></label></p>
</td>
</tr>
</table>
</div>