Given this example, try making your window smaller such that the size of the example is squished.
div {
padding: 1em;
background: #2424c6
}
table {
width: 100%;
}
input {
width: 150px;
}
<div>
<table>
<tr>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
</tr>
</table>
</div>
You will note that the textboxes (correctly) do not wrap to new lines as they are in individual <td>s.
However, the containing div, as denoted by the blue colour, does not completely wrap the table.
How can I make the containing div fully contain the child table?
Add display:table to the wrapping div.
div {
padding: 1em;
background: #2424c6;
display: table;
}
table {
width: 100%;
}
input {
width: 150px;
}
<div>
<table>
<tr>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
</tr>
</table>
</div>
Related
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>
I have a table with one row and two cells. I would like to get an input text field to be as wide as possible. How could do it that way?
( 0 )Text, text, text...
The main problem is that the width of the text input box is too much.
Here is the code:
<table style="width:400px">
<tr>
<td style="width:200px">
(<input type="text" name="num" value="0" class="kentta" />)
</td>
<td style="width:200px">
Text, text, text...
</td>
</tr>
</table>
And CSS code:
.kentta {
width: 100%;
padding: 1px;
border: none;
box-sizing: content-box;
height: 18px;
vertical-align: middle;
text-align: center;
line-height: 18px;
}
Instead of pixels, you can achieve it by using percentage of the width.
As give below
<table style="width:100%">
<tr> This will grow as large as.
<td style="width:80%"> <----'
<input type="text" name="num" value="0" style="border:none;text-align:center" />
</td>
<td style="width:20%">
Text, text, text...
</td>
</tr>
</table>
It is maximum for any table data.Use this on browser on 100% width.
<table style="width:100%">
<tr>
<td>
(<input type="text" name="num" value="0" style="border:none;text-align:center;width:98%;" />)
</td>
<td>
Text, text, text...
</td>
</tr>
This question already has answers here:
How to remove unwanted space between rows and columns in table?
(14 answers)
Closed 6 years ago.
I have a form that has input text in cells that are 100% of the cell. I have also collapsed borders and set spacing to 0px. I still see a gap between cells, well actually inputs. How can I remove these gaps between inputs? I'm trying to loosely mimic a spreadsheet.
The Code (https://jsfiddle.net/djyk8927/
):
#requestorTable{
border-collapse:collapse;
border-spacing:0px;
}
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
border:1px solid #919295;
}
<table id='requestorTable'>
<tr>
<td>
<input type='text' id='item1' name='item1'>
</td>
<td>
<input type='text' id='qty1' name='qty1'>
</td>
<td>
<input type='text' id='price1' name='price1'>
</td>
</tr>
<tr>
<td>
<input type='text' id='item2' name='item2'>
</td>
<td>
<input type='text' id='qty2' name='qty2'>
</td>
<td>
<input type='text' id='price2' name='price2'>
</td>
</tr>
<tr>
<td>
<input type='text' id='item3' name='item3'>
</td>
<td>
<input type='text' id='qty3' name='qty3'>
</td>
<td>
<input type='text' id='price3' name='price3'>
</td>
</tr>
</table>
You need to remove the padding from the cells (table data )
td {
padding: 0px;
}
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1px solid #919295;
}
table{
border-collapse:collapse;
border-spacing:0px;
}
td {
padding: 0px;
}
<table>
<tr>
<td>
<input type='text' id='item1' name='item1'>
</td>
<td>
<input type='text' id='qty1' name='qty1'>
</td>
<td>
<input type='text' id='price1' name='price1'>
</td>
</tr>
<tr>
<td>
<input type='text' id='item2' name='item2'>
</td>
<td>
<input type='text' id='qty2' name='qty2'>
</td>
<td>
<input type='text' id='price2' name='price2'>
</td>
</tr>
<tr>
<td>
<input type='text' id='item3' name='item3'>
</td>
<td>
<input type='text' id='qty3' name='qty3'>
</td>
<td>
<input type='text' id='price3' name='price3'>
</td>
</tr>
</table>
I've made radio button like this :
and I want to draw line between my radio button in css like this :
I made my form look like this with table tag.
<table>
<tbody>
<tr>
<td>
<label for="answer_1">1</label>
</td>
<td>
<label for="answer_2">2</label>
</td>
<td>
<label for="answer_3">3</label>
</td>
<td>
<label for="answer_4">4</label>
</td>
<td>
<label for="answer_5">5</label>
</td>
</tr>
<tr>
<td>
<input name="answer" id="answer_1" type="radio">
</td>
<td>
<input name="answer" id="answer_2" type="radio">
</td>
<td>
<input name="answer" id="answer_3" type="radio">
</td>
<td>
<input name="answer" id="answer_4" type="radio">
</td>
<td>
<input name="answer" id="answer_5" type="radio">
</td>
</tr>
</tbody>
</table>
You can see the result here :
https://jsfiddle.net/zpejzpw5/
How can I draw line between my radio button?
Using the :after pseudo element, you should be able to achieve this:
td input {
position: relative;
}
td input:after {
display: block;
content: " ";
position: absolute;
bottom: 6px;
background: #000;
height: 2px;
width: 100%;
right: -12px;
}
td:last-child input:after {
display: none;
}
<table>
<tbody>
<tr>
<td>
<label for="answer_1">1</label>
</td>
<td>
<label for="answer_2">2</label>
</td>
<td>
<label for="answer_3">3</label>
</td>
<td>
<label for="answer_4">4</label>
</td>
<td>
<label for="answer_5">5</label>
</td>
</tr>
<tr>
<td>
<input name="answer" id="answer_1" type="radio">
</td>
<td>
<input name="answer" id="answer_2" type="radio">
</td>
<td>
<input name="answer" id="answer_3" type="radio">
</td>
<td>
<input name="answer" id="answer_4" type="radio">
</td>
<td>
<input name="answer" id="answer_5" type="radio">
</td>
</tr>
</tbody>
</table>
Use this code
td {
text-align: center
}
.line td {
position: relative;
}
.line td:after {
content: '';
border-bottom: 1px solid #ccc;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(0, -100%);
z-index: -1;
}
.line td:last-child:after {
display: none;
}
}
<span id="reponses">
<table>
<tbody>
<tr>
<td>
<label for="answer_1">1</label>
</td>
<td>
<label for="answer_2">2</label>
</td>
<td>
<label for="answer_3">3</label>
</td>
<td>
<label for="answer_4">4</label>
</td>
<td>
<label for="answer_5">5</label>
</td>
</tr>
<tr class="line">
<td>
<input name="answer" id="answer_1" type="radio">
</td>
<td>
<input name="answer" id="answer_2" type="radio">
</td>
<td>
<input name="answer" id="answer_3" type="radio">
</td>
<td>
<input name="answer" id="answer_4" type="radio">
</td>
<td>
<input name="answer" id="answer_5" type="radio">
</td>
</tr>
</tbody>
</table>
</span>
I am new to html/css. i am trying to build up my own form and i am trying to align it in the center. I used the align property in css but its not working.
Html code:
<!DOCTYPE HTML>
<head>
<title>Web Page Having A Form</title>
<link rel = "stylesheet" type="text/css" href="Form.css">
</head>
<body>
<h1>Create a New Account</h1>
<form >
<table>
<tr>
<td>Name :</td> <td><input type="text" name="name"></td><br>
</tr>
<tr>
<td>Email :</td> <td><input type="text" name="email"></td><br>
</tr>
<tr>
<td>Password :</td> <td><input type="password" name="pwd"></td><br>
</tr>
<tr>
<td>Confirm Password :</td> <td><input type="password" name="cpwd"><br>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
Css Code:
body
{
background-color : #484848;
}
h1
{
color : #000000;
text-align : center;
font-family: "SIMPSON";
}
form
{
align:"center";
}
How should i change my code to align the entire form in the center?
Like this
demo
css
body {
background-color : #484848;
margin: 0;
padding: 0;
}
h1 {
color : #000000;
text-align : center;
font-family: "SIMPSON";
}
form {
width: 300px;
margin: 0 auto;
}
This is my answer. I'm not a Pro. I hope this answer may help you :3
<div align="center">
<form>
.
.
Your elements
.
.
</form>
</div>
Wrap the <form> element inside a div container and apply css to the div instead which makes things easier.
#aDiv{width: 300px; height: 300px; margin: 0 auto;}
<html>
<head></head>
<body>
<div>
<form>
<div id="aDiv">
<table>
<tr>
<td>Name :</td>
<td>
<input type="text" name="name">
</td>
<br>
</tr>
<tr>
<td>Email :</td>
<td>
<input type="text" name="email">
</td>
<br>
</tr>
<tr>
<td>Password :</td>
<td>
<input type="password" name="pwd">
</td>
<br>
</tr>
<tr>
<td>Confirm Password :</td>
<td>
<input type="password" name="cpwd">
<br>
</tr>
<tr>
<td>
<input type="submit" value="Submit">
</td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
I would just use table and not the form. Its done by using margin.
table {
margin: 0 auto;
}
also try using something like
table td {
padding-bottom: 5px;
}
instead of <br />
and also your input should end with />
e.g:
<input type="password" name="cpwd" />
Or you can just use the <center></center> tags.
Wrap the element inside a div container as a row like
your form here or something like that.
Set css attribute:
width: 30%; (or anything you want)
margin: auto;
Please take a look on following picture for more detail.