I am using pure css to design my web page. I have this table/form on my page. Unfortunaltey it exceeds the width of my screen. How can I make the table autoamticall format so that it fits my screen? I would like that each columns "shrinks" until the table fits the screen width of the user.
<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:200">
<link rel="stylesheet" href="css/layouts/style_pure.css">
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/layouts/side-menu-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/layouts/side-menu.css">
<!--<![endif]-->
</head>
<body>
<form class="pure-table">
<table class="pure-table">
<thead>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
<td>Col7</td>
</tr>
</thead>
<tbody>
<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>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
</form>
</body>
</html>
set your table width to 100% , also set the text input fields inside each cell to 100% width.
here is a working example :
http://jsfiddle.net/ggLvLs3e/16/
CSS
.stretch{
width:100%;
}
input[type="text"]{
width:100%;
}
HTML
<table class="pure-table stretch">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
Related
I am coding timesheet table using materiailze CSS with form elements in cells. I don't like a height of the table rows. Is there any way how to make the table much more compact?
If this is a limitation of materialize, what is better CSS framework option?
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<form>
<table>
<col width=100>
<col width=100>
<col width=100>
<col width=100>
<col width=200>
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Date</th>
<th>Time</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="date" name="day" value="2019-01-01"></td>
<td><input type="time" name="day" value="10:00"></td>
<td><input type="date" name="day" value="2019-01-01"></td>
<td><input type="time" name="day" value="18:30"></td>
<td>
<select>
<option value=1>Regular shift</option>
<option value=2>Vacation</option>
</select>
</td>
<td><input name="day"></td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
This is just a small css fix...
For exemple you can add this little piece of code :
<style>
td {padding: 2px 5px;}
td input{margin:0 !important;height:2em !important;}
td .select-wrapper input.select-dropdown{height:2em;line-height:2em;}
</style>
I know that it's been an ongoing discussion, and that float:right is supposed to be the answer to avoiding the use of tables for formatting, but I can't seem to figure out how to do the following without tables. The labels will change based on language, so fixed widths can't be used.
I can't seem to get float:right to work when the inputs are different widths. Here's the HTML I used with a table...
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head />
<body>
<style>
.left {
width:1%;
white-space:nowrap;
text-align:right;
padding-right: 5px;
}
</style>
<form>
<table
width="400">
<tr>
<td class="left">Name:</td>
<td>
<input
type="text"
style="display:table-cell; width:100%"/>
</td>
</tr>
<tr>
<td class="left">Telephone Number:</td>
<td>
<input
type="text" style="width: 30px;"
/>-<input
type="text" style="width: 30px;"
/>-<input
type="text" style="width: 40px;"/>
</td>
</tr>
<tr>
<td colspan="2">
<input
type="checkbox"
/>Okay to leave the package without a signature.
</td>
</tr>
<tr>
<td valign="top" class="left">Delivery Notes:</td>
<td>
<textarea
rows="5"
style="display:table-cell;
width:100%"
></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
Thanks.
I'm just begin to study HTML for school.
Now I have to build a simple website with a form.
I did it in table-format.
The problem is that I need to show the input of the table on my display after using the submit-button.
I searched over 4 hours but did not find any solution.
Can someone help me with it?
Below my html-code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Salsa</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Salsa Events</h1>
<p>Submit for your newsletter.<br>
</p>
<form action="" method="get">
<center><table border="2">
<tr>
<td>First name</td>
<td><input type="text" name="first name" required></td>
</tr>
<tr>
<td>Family name</td>
<td><input type="text" name="family name" required></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="email" name="e-mail" required></td>
</tr>
<tr>
<td>Date of birth</td>
<td><input type="date" name="date of birth" required></td>
</tr>
<tr>
<td>Recieve newsletter</td>
<td><input type="checkbox" name="is_checkbox" checked></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Send"> </td>
</tr>
</table></center>
</form>
</body>
</html>
Can someone explains how is that possible that an inputof type "submit" is placed at the top-left although it's inside the third <tr>
I can change its position to the right place through margin and position properties, but there should be no need for them at all in this case.
see the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>
Insert td like this:
<td> <---------------
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td> <--------------
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
you forgot to add td in your tr section, and because your third tr has only one td, you must set colspan to 3 as it's property...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td colspan="3">
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>
I have a login page. It doesn't have much text, and it is quite readable in big screens, such as a laptop or a tablet. However, in a mobile one has to zoom it until he sees what is written there. I want to make it scalable, but it looks like I don't know how to do it. Here is the HTML.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<style>
.big {
width:100%;
text-align:center;
}
</style>
</head>
<body>
<form name="form1" action="enter.php" method="post">
<table class="big">
<tr>
<td colspan="2">
<img src="http://www.lipsum.com/images/banners/grey_234x60.gif">
</td>
</tr>
<td align="right">Name:</td>
<td align="left"><input id="Username" name="Username" size="25" type="text"></td>
</tr>
<tr>
<td align="right">Pass:</td>
<td align="left"><input id="Password" name="Password" size="25" type="password"></td>
</tr>
<tr>
<td><input type="submit" value="Sumbit"></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
You need to make adaptive and responsive design . You can use these libraries to help you make a responsive grid, for example:
http://getskeleton.com/
They use "media queries " for responsive design, you leave a link :
https://developer.mozilla.org/es/docs/CSS/Media_queries
Good luck :)
Try adding the below line between your <head>...</head> tag
<meta name=viewport content="width=device-width, initial-scale=1">
Only to give you an idea about the elements envolved...
Expand the snipet in fuul screen than resize browser page.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<style>
.big {
width:100%;
text-align:center;
}
#media only screen and (max-width: 600px) {
body {
font-size:1.6em;
}
input{
width: 90%;
font-size: 1.4em;
}
input[type="submit"] {
width: 50%;
}
}
</style>
</head>
<body>
<form name="form1" action="enter.php" method="post">
<table class="big">
<tr>
<td colspan="2">
<img src="http://www.lipsum.com/images/banners/grey_234x60.gif">
</td>
</tr>
<td align="right">Name:</td>
<td align="left"><input id="Username" name="Username" size="25" type="text"></td>
<td></td>
</tr>
<tr>
<td align="right">Pass:</td>
<td align="left"><input id="Password" name="Password" size="25" type="password"></td>
<td></td>
</tr>
<tr>
<td></td>
<td style="text-align:left"><input type="submit" value="Sumbit"></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>