I have a simple html code below along with few line css to highlight table row
HTML
<table style="empty-cells:hide;" border="1" cellpadding="1" cellspacing="1">
<tr>
<th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
</tr>
<tr>
<td class="center">
<input type="checkbox" name="query_myTextEditBox">
</td>
<td>
myTextEditBox
</td>
<td>
<select size ="1" name="myTextEditBox_compare_operator">
<option value="=">equals</option>
<option value="<>">does not equal</option>
</select>
</td>
<td>
<input type="text" name="myTextEditBox_compare_value">
</td>
<td class="center">
<input type="checkbox" name="report_myTextEditBox" value="checked">
</td>
</tr>
</table>
CSS
.
center {
text-align: center;
vertical-align: middle;
}
td, th {
padding: 5px;
}
tr {
height: 25px;
}
tr:hover{
background-color: yellow;
}
the hover property does highlight table row but it excludes child component like input and checkbox.How can I highlight those components when row is hovered
Try this in addition to what you have...
tr:hover input{
background-color: yellow;
}
Related
I have a problem. I created the following form:
.input-block {
width: 100%;
padding-bottom: 40px;
}
.input-block span {
font-size: 19px;
}
.input-block table {
width: 100%;
border-spacing: 0;
}
.input-block td {
width: 10%
}
.input-block input, select {
width: 50%;
font-size: 16px;
}
.input-block input, select {
padding: 6px 6px;
margin: 8px 0;
display: inline-block;
border: 1px solid #000;
box-sizing: border-box;
}
<div class="input-block">
<h2>Account information</h2>
<table>
<tr>
<td>
<span>Voornaam</span>
</td>
<td>
<input type="text" value="Alexander" />
</td>
</tr>
<tr>
<td>
<span>Tussenvoegsel</span>
</td>
<td>
<input type="text" value="van" />
</td>
</tr>
<tr>
<td>
<span>Achternaam</span>
</td>
<td>
<input type="text" value="Dijk" />
</td>
</tr>
<tr>
<td>
<span>Email</span>
</td>
<td>
<input type="text" value="alexandervdijk#gmail.com" />
</td>
</tr>
</table>
</div>
<div class="input-block">
<h2>Wachtwoord veranderen</h2>
<table>
<tr>
<td>
<span>Nieuw wachtwoord</span>
</td>
<td>
<input type="password" value="" />
</td>
</tr>
<tr>
<td>
<span>Herhaal wachtwoord</span>
</td>
<td>
<input type="password" value="" />
</td>
</tr>
</table>
</div>
<div class="input-block">
<h2>Profiel informatie</h2>
<table>
<tr>
<td>
<span>Geslacht</span>
</td>
<td>
<select id="geslacht" name="geslacht">
<option value="man" selected>Man</option>
<option value="vrouw">Vrouw</option>
</select>
</td>
</tr>
<tr>
<td>
<span>Nationaliteit</span>
</td>
<td>
<select id="nationaliteit" name="nationaliteit">
<option value="nederland" selected>Nederland</option>
<option value="belgie">Belgie</option>
<option value="duitsland">Duitsland</option>
<option value="frankrijk">Frankrijk</option>
</select>
</td>
</tr>
</table>
</div>
Now, this is almost like the way I want, but I can't change 2 things:
I want to decrease the row spacing in the table, so the items are more compact on the screen. The space doesn't need to be gone, but a bit smaller
The input boxes and the names before the input boxes can be closer to each other. I already tried to set a width of 10% on the td in the table, but that didn't work.
Can someone help me change the layout?
I adjusted your code a bit, mostly just the CSS.
Are you looking for something that's more like this?
I put a set width on your input
.input-block input, select {
width: 300px;
font-size: 16px;
}
and decreased width of your input block
.input-block {
width: 70%;
padding-bottom: 40px;
}
.input-block {
width: 70%;
padding-bottom: 40px;
}
.input-block span {
font-size: 19px;
}
.input-block table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.input-block td {
width: 10%;
}
.input-block input, select {
width: 300px;
font-size: 16px;
}
.input-block input, select {
padding: 6px 6px;
margin: 8px 0;
display: inline-block;
border: 1px solid #000;
box-sizing: border-box;
}
<div class="input-block">
<h2>Account information</h2>
<table>
<tr>
<td>
<span>Voornaam</span>
</td>
<td>
<input type="text" value="Alexander" />
</td>
</tr>
<tr>
<td>
<span>Tussenvoegsel</span>
</td>
<td>
<input type="text" value="van" />
</td>
</tr>
<tr>
<td>
<span>Achternaam</span>
</td>
<td>
<input type="text" value="Dijk" />
</td>
</tr>
<tr>
<td>
<span>Email</span>
</td>
<td>
<input type="text" value="alexandervdijk#gmail.com" />
</td>
</tr>
</table>
</div>
</div>
I'm trying to create a "register" page in HTML and I made the table to the center. But when I moved the table to the center there was a huge gap between 's.
I tried "cellspacing" but it doesn't work since im working with HTML5.
I also tried "border-spacing:0px;" but it doesn't work either.
I'm using latest version of Chrome and Sublime Text
Code:
body {
background-color: #8F3985;
}
table.tablo {
background-color: #07BEB8;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 650px;
border-spacing: 0px;
}
table {
border-spacing: 0px;
}
<form>
<table class="tablo">
<tr>
<td>
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td>
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>
Sometime when any style issue is there the reason can be style of parent control. In this case Table is nested inside Form control, so need to change style of form control first,after changing style of form position has change and for space little change in padding of table.
body {
background-color: #8F3985;
}
table.tablo {
background-color: #07BEB8;
margin-left: auto;
margin-right: auto;
width: 650px;
padding: 50px;
}
form {
margin-top:20%;
margin-left:10%;
margin-right:10%;
margin-bottom:20%;
width: 80%;
}
<form>
<table class="tablo">
<tr>
<td>
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td>
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>
Are you looking for this result?
Edit
removed height: 650px; from table.table
The height for each row was too high because You set the height of the table to a specific value [in your case 650px] and row heights were evenly distributed.
The solution is either to remove the height property or adjust the height according to your need.
Please note, this will not guarantee browser compatibility. It will be good to go with proven CSS frameworks like bootstrap to achieve the same result with responsiveness and browser compatibility.
body {
background-color: #8F3985;
}
table.tablo {
background-color: #07BEB8;
margin-left: auto;
margin-right: auto;
width: 600px;
border-spacing: 0px;
}
table {
border-spacing: 0px;
}
<form>
<table class="tablo">
<tr>
<td colspan="2">
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td width="20%">
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>
In your css code, you have fixed the height = 600px, which actually takes control of the inner size of the table and stretches table to become 600px in size. To use border-spacing, you can just remove the height of table and update the value of border-spacing, then it will show you the actual spacing that you want to use in it.
I have updated your code below, just run and enjoy ;)
<!DOCTYPE html>
<html>
<style type="text/css">
body{
background-color:#8F3985;
}
table.tablo{
background-color:#07BEB8;
margin-left:auto;
margin-right: auto;
width:600px;
border-spacing: 5px;
}
</style>
<head>
<title></title>
</head>
<body>
<form>
<table class="tablo">
<tr>
<td>
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td>
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>
</body>
</html>
These properties should work.
table {
max-width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
tbody, tr {
width: 100%;
}
table.tablo, table.tablo * {
box-sizing: border-box;
}
table.tablo {
width: 600px;
margin-right: auto;
margin-left: auto;
background-color: #07beb8;
}
table.tablo td {
width: 50%;
vertical-align: top;
padding: 0; /* change in whitespace you like */
}
table.tablo td:first-child {
width: 100%;
}
and use for the header
<tr>
<td colspan="2">
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
fieldset {
width: 510px;
border-width: 1px;
border-color: black;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 2em;
}
*:not(.menu)(fieldset) {
margin: 1;
padding: 1;
}
<form>
<fieldset>
<legend style="font-weight: bold">
Persoonsgegevens
</legend>
<table>
<tr>
<td class="td1"><label for="Voorletters">Voorletters</label></td>
<td class="td2"><input name="Voorletters" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Achternaam">Achternaam</label></td>
<td class="td2"><input name="Achternaam" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Huisnummer">Huisnummer</label></td>
<td class="td2"><input name="Huisnummer" type="number" /></td>
<tr>
<tr>
<td class="td1"><label for="Postcode">Postcode</label></td>
<td class="td2"><input name="Postcode" type="text" pattern="^[1-9]{4}[A-Z]{2}" title="Postcode: 1234AA" placeholder="Format: 1234AA" /></td>
</tr>
</table>
</fieldset>
</form>
I'm learning HTML/CSS and working on a form to learn the syntax.
In the form I have a multiple fields like input type="text" input type="number" and type="text" with pattern.
The width of the number and text with pattern fields is smaller then the width of the regular text fields. I've investigated this and solved this by adding the following CSS code:
*:not(.menu){
Margin: 1;
padding: 0;
}
That worked fine but I'm using a fieldset in which I want to set the padding with the following code:
fieldset {
width: 510px;
border-width: 1px;
border-color: black;
padding-left:1em;
padding-right: 1em;
padding-bottom: 2em;
}
This code does not work unless I change the previous code to:
*:not(.menu)(fieldset)
margin: 1;
padding: 1;
}
but then the text field with pattern and number field aren't the same size as the regular text field anymore.
Anybody any ideas how to fix this?
You can set the width of all input fields in the css like this:
fieldset {
width: 510px;
border-width: 1px;
border-color: black;
padding-left:1em;
padding-right: 1em;
padding-bottom: 2em;
}
*:not(.menu)(fieldset){
margin: 1;
padding: 1;
}
input {
width:200px; /*<------Set the width here as you desire*/
}
<form>
<fieldset>
<legend style="font-weight: bold"><h3>Persoonsgegevens</h3></legend>
<table>
<tr>
<td class="td1"><label for="Voorletters">Voorletters</lable></td>
<td class="td2"><input name="Voorletters" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Achternaam">Achternaam</lable></td>
<td class="td2"><input name="Achternaam" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Huisnummer">Huisnummer</lable></td>
<td class="td2"><input name="Huisnummer" type="number" /></td>
<tr>
<tr>
<td class="td1"><label for="Postcode">Postcode</lable></td>
<td class="td2"><input name="Postcode" type="text" pattern="^[1-9]{4}[A-Z]{2}" title="Postcode: 1234AA" placeholder="Format: 1234AA" /></td>
</tr>
</table>
</fieldset>
</form>
Here I made a picture, to show you that they are all the same:
I found the following css on the net and used it on my site to show a side by side tables. Most of them are working nicely in all three browsers, IE11, Chrome and Firefox except on one of my template. Although the tables show side by side but the content of the right table does not fully fill the cell correctly. Instead, it seems like the css creates two columns on the right table and only fill in the content of the left column leaving the right column blank. The right table only have one cell.
Here is the codes creating side by side tables:
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 12px Arial, sans-serif;
}
.zui-table thead th {
background-color: ##DDEFEF;
;
border: solid 1px #DDEEEE;
;
color: #336B6B;
padding: 3px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
;
color: #333;
padding: 3px;
text-shadow: 1px 1px 1px #fff;
}
.zui-table-horizontal tbody td {
border-left: none;
border-right: none;
}
<div id="wrap">
<table CLASS="zui-table">
<tbody>
<tr>
<td valign="top">
<div class="medGreyText">Requester</div>
</td>
<td valign="top"><input type="text" name="requester" class="inputReqText" value="somevalue" Required="True"></td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Requesting Institution</div>
</td>
<td valign="top">
<select Name="req_institution" id="req_institution" class="RegSelect" Required="True">
<option value="">--- Please select Institution ---</option>
<option value="xx">xx</option>
<option value="aa">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
</select>
</td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Requester's Email</div>
</td>
<td valign="top"><input name="req_email" id="req_email" type="text" class="inputReqText" value="" Required="True"></td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Entity Type</div>
</td>
<td valign="top">
<select Name="type" class="RegSelect" Required="True">
<option value="">---Please select entity type ---</option>
<option value="Ind">Individual</option>
<option value="Org">Organization</option>
</select>
</td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Advance ID</div>
</td>
<td valign="top"><input type="text" name="idno" id="idno" class="inputReqText" value="" Required="True"></td>
</tr>
<tr>
<td align="center" colspan="2">
<br><br>
<input name="submit" type="submit" value="G E T D A T A" class="SubmitButtons">
</td>
</tr>
</tbody>
</table>
<table CLASS="zui-table">
← the problem area!!! <tbody>
<tr>
<td>
<b>OFFICE POLICY</b><br> It is the goal of the XX research office to offer its' constituents quality.....forth and clarifying our procedures and explaining some of our methods etc....
</td>
</tr>
</tbody>
</table>
</div>
As you see from the screenshot, the tables appear side by side but the content of the right table, the office policy, is not populating the whole cell but instead this css on this template creates two columns side by side. I've been debugging this since this morning with no success.
the css zui-table-horizontal tbody td does not seem to work???
There are several ways to accomplish 2 side-by-side tables with HTML/CSS. There is already an SO answer here:
HTML — Two Tables Horizontally Side by Side
Their example of using one of these styles will solve most cases:
display: inline-block
or
float: left
There are a few things to consider though. In responsive HTML on a mobile device, the tables as you have it will probably go one above the other, which is a good thing for the user experience. If you force them to be side-by-side, the user many never see the right side table.
If side-by-side tables is what you really want, you could go old school and embed your tables in another table, and put each table in separate table columns.
For example, the following snippet generates what you want:
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 12px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 3px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 3px;
text-shadow: 1px 1px 1px #fff;
}
.zui-table-horizontal tbody td {
border-left: none;
border-right: none;
}
<div id="wrap">
<table>
<tr>
<td>
<table CLASS="zui-table">
<tbody>
<tr>
<td valign="top">
<div class="medGreyText">Requester</div>
</td>
<td valign="top"><input type="text" name="requester" class="inputReqText" value="somevalue" Required="True"></td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Requesting Institution</div>
</td>
<td valign="top">
<select Name="req_institution" id="req_institution" class="RegSelect" Required="True">
<option value="">--- Please select Institution ---</option>
<option value="xx">xx</option>
<option value="aa">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
</select>
</td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Requester's Email</div>
</td>
<td valign="top"><input name="req_email" id="req_email" type="text" class="inputReqText" value="" Required="True"></td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Entity Type</div>
</td>
<td valign="top">
<select Name="type" class="RegSelect" Required="True">
<option value="">---Please select entity type ---</option>
<option value="Ind">Individual</option>
<option value="Org">Organization</option>
</select>
</td>
</tr>
<tr>
<td valign="top">
<div class="medGreyText">Advance ID</div>
</td>
<td valign="top"><input type="text" name="idno" id="idno" class="inputReqText" value="" Required="True"></td>
</tr>
<tr>
<td align="center" colspan="2">
<br><br>
<input name="submit" type="submit" value="G E T D A T A" class="SubmitButtons">
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table CLASS="zui-table">
<tbody>
<tr>
<td>
<b>OFFICE POLICY</b><br> It is the goal of the XX research office to offer its' constituents quality.....forth and clarifying our procedures and explaining some of our methods etc....
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
I had a quick HTML/CSS question I hope someone could help me with!
I am trying to learn the specifics of CSS in an online course. I am trying to do a very specific alignment with CSS within a form within a fieldset within a table. I need to have a fieldset split down the middle, and have the label directly on the left, and the input of the form directly on the right. I uploaded 2 pictures: what I have so far and what I am hoping to get, to give a visualization of what I am trying to achieve.
For anyone versed in CSS I am sure this is very easy but it's confusing me. Was just hoping to get some direction!
What I have:
http://imgur.com/gKoWux7
What I want to get:
http://imgur.com/IfeK8D1
Ignore the repetitive code/names in the first image, I am just worried about the alignment of the labels, inputs and buttons.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test 2</title>
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<table>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Registration Information</legend>
<table>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Submit Your Registration</legend>
<table>
<tr>
<td><input type="submit"></td>
<td><input type="reset"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Here is my CSS:
body {
background-color: #A8F89C;
margin: auto;
width: 50%;
}
table {
width: 400px;
table-layout: fixed;
}
fieldset {
width: 410px;
margin: auto;
width: 50%;
}
legend {
font-size: 16px;
font-weight: bold;
}
label {
font-size: 14px;
color: #06127D;
}
td label {
font-weight: bold;
padding-right: 7px;
}
td input {
padding-left: 7px;
}
form input {
width: 140px;
}
label input[type="radio"] {
font-size: 14px;
color: #201E1C;
}
button {
width: 75px;
font-weight: bold;
background-color: rgb(28,67,14);
}
Thank you so much for any help!!!
I just have read your requirement what you want to get.
You can use below mentioned css to get layout like this image
http://imgur.com/IfeK8D1
<style>
fieldset,table{
width:100%
}
td{
width:50%;
}
tbody tr td:first-child{
text-align:right;
padding-right:20px;
}
I hope it will usefull for you as per your need.
Thanks
My idea would add this CSS to (Because label doesn't fill the entire width of the td as label is not a block level element)
td label{
width:100%;
display: inline-block;
text-align:right;
}
or if you prefer you could something like this too, add
td {
text-align: right
}
but it moves all the td elements to right.
Snippet below
Take out the border if needed
body {
background-color: #A8F89C;
margin: auto;
}
table {
table-layout: fixed;
}
fieldset {
width: 410px;
margin: auto;
text-align: center;
}
legend {
font-size: 16px;
font-weight: bold;
}
label {
font-size: 14px;
color: #06127D;
}
td label {
font-weight: bold;
padding-right: 7px;
}
td input {
padding-left: 7px;
}
form input {
width: 140px;
}
label input[type="radio"] {
font-size: 14px;
color: #201E1C;
}
button {
width: 75px;
font-weight: bold;
background-color: rgb(28, 67, 14);
}
table {
border: solid red;
display: inline-table;
}
fieldset {
border: solid blue;
}
td:nth-child(1) {
text-align: right
}
<!DOCTYPE html>
<html>
<head>
<title>Test 2</title>
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<table>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Registration Information</legend>
<table>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Submit Your Registration</legend>
<table>
<tr>
<td>
<input type="submit">
</td>
<td>
<input type="reset">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
First of all using div maybe easier to use ..I have modify a bit of your html where i get rid of the tr and td and use div .Hope this help
<div align = "center">
<label>First Name:</label>
<input type="text">
</div>