My table does not resize when i have an input in it.
<table class="table table-hover table-responsive " cellspacing="1" cellpadding="2" border="2">
<tr class="info">
<td align="left"><b>Name</b>
</td>
<td width="200" align="left"><b>URL</b>
</td>
<td></td>
</tr>
<tr bgcolor="#DFE9F9">
<td align="left">
<input class="input" name="name">
</td>
<td align="left">
<input class="input" size="41" name="web">
</td>
<td align="left">
<input type="submit" name="Submit_add" value="Add">
</td>
</tr>
</table>
the following table is not responsive.
How to make it responsive?
Thanks
Replace class="input" with class="form-control"
<table class="table table-hover table-responsive " cellspacing="1" cellpadding="2" border="2">
<tr class="info">
<td align="left"><b>Name</b></td>
<td width="200" align="left"><b>URL</b></td>
<td></td>
</tr>
<tr bgcolor="#DFE9F9">
<td align="left"><input class="input form-control" name="name"></td>
<td align="left"><input class="input form-control" size="41" name="web"></td>
<td align="left"><input type="submit" name="Submit_add" value="Add"></td>
</tr>
</table>
Since your loading in boostrap anyways, why not use the bootstrap grid system?
Very easy to implement, for example: class="col-lg-3". You can find more information on the bootstrap - grid page.
Goodluck
Related
Here is my UI
Here is my code
<div class="container">
<table id="headerTable" class="table table-bordered ">
<thead class="thead-default">
<tr>
<th colspan="2">電文Header</th>
</tr>
</thead>
<tbody>
<tr>
<th>Filler1</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
<tr>
<th>MessageType</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
<tr>
<th>MessageLength</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
</tbody>
</table>
</div>
How do I adjust the to make it smaller like following?
thank you
<div class="container">
<table id="headerTable" class="table table-bordered ">
<thead class="thead-default">
<tr>
<th colspan="2">電文Header</th>
</tr>
</thead>
<tbody>
<tr>
<th class="col-sm-1">Filler1</th>
<td class="col-sm-11">
<input id="123" type="text" class="input-sm">
</td>
</tr>
<tr>
<th class="col-sm-1">MessageType</th>
<td class="col-sm-11">
<input type="text" class="input-sm">
</td>
</tr>
<tr>
<th class="col-sm-1">MessageLength</th>
<td class="col-sm-11">
<input type="text" class="input-sm">
</td>
</tr>
</tbody>
</table>
Just put in the Bootstrap Grid class so that <th> and <td> element would not be too wide.
See https://www.bootply.com/BLINHddRZV for output.
Edit: Did not see it is using bootstrap4. Please check this issue and the reply from mdo. Apparently, the grid class is no longer supported for table.
I have wrote in scripting a simple question list, I need the responses to be returned in a txt file via email when the person hits submit. The front end of the file works, the email creates but the form does not post. Can anyone help with this scripting please?
Coding listed below:
<form action="mailto:test#yahoo.com?subject=Test" id="form" method="post" name="form" >
<!-- PAGE HEADER -->
<table bgcolor=#D1DEE5>
<tr>
<td width="833px"align="center">
<input class="title" name="Title" value="Customer Satisfaction Survey">
</td>
</tr>
</table>
<!-- QUESTIONS -->
<p>
<table>
<tr>
<td>
<p> Welcome message
<p>
</ul>
</td>
</tr>
</table>
<br>
<table>
<tr class="shaded">
<td align="left">
<p><b>Please tell us based on your experience, how satisfied you are with the following services:</b>
</td>
<td align="center" width="50px">Very satisfied</td>
<td align="center" width="50px">Satisfied</td>
<td align="center" width="50px">Dissatisfied</td>
<td align="center" width="50px">Very Dissatisfied</td>
<td align="center" width="50px">N/A</td>
</tr>
<tr>
<td>A</td>
<td align="center" width="50px"><input type="radio" name="q1" value="Very satisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Satisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Dissatisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Very Dissatisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="N/A"></td>
</tr>
</table>
<br>
<table class="outlineTable" bgcolor=#D1DEE5>
<tr>
<td align="left" rowspan=5 width=500 style="vertical-align:top" style="padding-top:5px">
<p><b>Please add comments to explain your answers</b>
<br><textarea name="Comments10" id="Comments10" rows="7" cols="55"></textarea>
</td>
<td align="left">
Month being scored
</td>
<td align="left" class="submitButton">
<input class="name" name="Month">
</td>
</tr>
<tr>
<td align="left">
Name
</td>
<td align="left" class="submitButton">
<input class="name" name="Name">
</td>
</tr>
<tr>
<td align="left">
Date
</td>
<td align="left" class="submitButton">
<input class="name" name="Date">
</td>
</tr>
<tr>
<td align="left">
</td>
<td align="left" class="submitButton">
<input class="button2" type="submit" value="Click here to submit results">
</td>
</tr>
</table>
<br>
<table bgcolor=#D1DEE5>
<tr>
<td align="center">
<h1> Many thanks for taking the time to complete this survey
</td>
</tr>
</table>
<p>
</form>
</body>
</html>
i am designing a contact page for a friend he gave me a templete to use for his site it has a contact page already built in with the following code
<td><form method="post" action="/frms/contactmail.pl">
<input type="hidden" name="SoupermailConf" value="/frms/contact.con">
<table width="100%" border="0" cellpadding="0" align="center" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellpadding="4" cellspacing="1">
<tr>
<td align="Right"><b>Your
Name: <span class="style1">*</span></b></td>
<td width="70%"><input type="TEXT" name="Name" style="width: 90%;">
</td>
</tr>
<tr>
<td align="Right"><b>E-mail
Address: <span class="style1">*</span></b></td>
<td><input type="TEXT" name="Name2" style="width: 90%;"></td>
</tr>
<tr>
<td align="Right"><b>Company:</b></td>
<td><input type="TEXT" name="Name3" style="width: 90%;"></td>
</tr>
<tr>
<td align="Right"><b>How
did you
find us?</b></td>
<td><input type="TEXT" name="Name4" style="width: 90%;"></td>
</tr>
<tr>
<td align="right"><b> Questions: <span class="style1">* </span></b></td>
<td> </td>
</tr>
<tr>
<td colspan="2" align="center"><textarea name="Question" rows="8" style="width: 90%;" wrap="VIRTUAL"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Submit" value="Submit Form">
<br>
</td>
</tr>
</table></td>
</tr>
</table>
</form>
I do not see where there is an action or mailto command how do i need to change this to make it email to a specific email address.
Looking at the <form> tag, the specified action is a Perl/CGI script - "/frms/contactmail.pl".
Looking at the hidden field named "SoupermailConf", I'd guess this is using the (VERY old) Perl/CGI script Soupermail.
I would recommend you update to something else (perhaps PHP based) if you (or your friend) can?
But, if you cant then according to the manual a hidden field named Email should do the trick.
<input type="hidden" name="Email" value="someone#your.website" />
After looking at the manul pages for the mailer and some examples for the config.txt file I needed to write to make it work.
So I am doing a mobile site for my main site, but I wish for the site to be remained unchanged to its text input sizes, but for the mobile to be resizeable when using a mobile.
Here is my form code.
<form name="htmlform" method="post" action="thankyou.php" target="_blank">
<table width="447" cellpadding="0" cellspacing="0">
<td width="130"></tr>
<tr align="left" valign="top">
<td height="30" align="left" valign="middle">Full Name</td>
<td width="317" height="30" valign="middle">
<input type="text" name="first_name" maxlength="50" size="50"> </td>
</tr>
<tr align="left" valign="top">
<td height="30" align="left" valign="middle"">Subject</td>
<td height="30" valign="middle">
<input type="text" name="last_name" maxlength="100%" size="50"> </td>
</tr>
<tr align="left" valign="top">
<td height="30" align="left" valign="middle">Email Address</td>
<td height="30" valign="middle">
<input type="text" name="email" maxlength="50" size="50"> </td>
</tr>
<tr align="left" valign="top">
<td height="30" align="left" valign="middle">Contact Number</td>
<td height="30" valign="middle">
<input type="text" name="telephone" maxlength="50" size="50"> </td>
</tr>
<tr align="left" valign="top">
<td height="140" align="left" valign="middle">Content</td>
<td height="140" valign="middle">
<textarea name="comments" cols="50" rows="8" wrap="VIRTUAL"></textarea> </td>
</tr>
<tr align="right" valign="middle">
<td height="32" colspan="2" style="text-align:center">
<div align="right">
<input type="submit" value="Submit">
</div></td>
</tr>
</table>
</form>
u can make 2 classes for all the inputs,and then use the jquery,to determine if the windowsize's width is a portable, small device or not,and toggle right classes accordingly to the size
(if u dont have a jquery knowledge,let me know,i will be more specific)
I want to indent the text "Did you forget your username instead" to the position where the text "username" is.
Screenshot of what it looks like and you'll understand what I mean:
</td>
</tr></tbody></table><table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FFBF00">
<tbody><tr>
</tr><tr>
<form id="form1" method="post" action="checklogin.php"></form>
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#D8D8D8">
<tbody><tr>
<td colspan="3"><strong>
</strong></td>
</tr>
<tr>
<td colspan="3"><strong>Forgot your password? </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Did you forget <a href=http://www.google.com>your username</a> instead? <br></br>
<input type="submit" name="Submit" value="Submit">
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</div></body></html>
I believe you are looking for colspan
Remove the two columns before the 'Did you forget...' column like this:
Here is an example: http://jsfiddle.net/nKx3U/
<tr>
<td colspan="3">Did you forget <a href=http://www.google.com>your username</a> instead? <br></br>
<input type="submit" name="Submit" value="Submit">
</tr>
I am also not sure if a table is the best option for this.