Last 3 cells are going out of table. How to make them come inside the table.
"UG(Date of Joining)" should be just next to first date picker.
Overall there should be 5 cells in that 1 row.
html,body{
background: rgb(211, 212, 218)
}
.table{
background-color: rgb(211, 212, 218);
}
<div class="table">
<table cellpadding="8" border="2" , align="center" style="width: 100%;">
<form>
<tr style="background-color: royalblue;">
<th style="color: white;" colspan="2"> <tt style="font-size: larger;">Acedamic Details</tt></th>
</tr>
<tr>
<th>Student Name</th>
<td>
First Name <label><input type="text"></label>
Middle Name <label><input type="text"></label>
Last Name <label><input type="text"></label>
</td>
</tr>
<tr>
<th>UG (Date of Joining)</th>
<td><input type="date"></td>
<th>UG (Date of Joining)</th>
<td><input type="date"></td>
<td>
<button title="button title" class="action primary tocart" onclick=" window.open('marks.html'); return false;">Upload Marks</button>
</td>
</tr>
</form>
</table>
</div>
To make each row in the table a form, you can use the following structure:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid rgb(218, 218, 223);
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.inputs{
height: 25px;
}
.submitButtons{
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>ID</td>
<td>First Name</td>
<td>Last Name</td>
<td>Start Date</td>
<td>Stop Date</td>
<td>Save</td>
</tr>
<tr>
<td>
<form id="form1"><input type="hidden" name="id" value="1" /></form>
</td>
<td><input class="inputs" form="form1" type="text" name="name" placeholder="Enter First Name" /></td>
<td><input class="inputs" form="form1" type="text" name="description" placeholder="Enter Last Name" /></td>
<td><input class="inputs" form="form1" type="date" value="Save" /></td>
<td><input class="inputs" form="form1" type="date" value="Save" /></td>
<td><input class="submitButtons" form="form1" type="button" value="Save" /></td>
</tr>
<tr>
<td>
<form id="form2"><input type="hidden" name="id" value="2" /></form>
</td>
<td><input class="inputs" form="form2" type="text" name="name" placeholder="Enter First Name" /></td>
<td><input class="inputs" form="form2" type="text" name="description" placeholder="Enter Last Name" /></td>
<td><input class="inputs" form="form2" type="date" value="Save" /></td>
<td><input class="inputs" form="form2" type="date" value="Save" /></td>
<td><input class="submitButtons" form="form2" type="button" value="Save" /></td>
</tr>
</table>
<script>
/* Scripts */
</script>
</body>
</html>
Your table can have maximum two td or th whereas on the last tr you have defined five td & th. What you really should do is on the first tr do colspan=5 instead of doing colspan=2 and on the second tr do one with colspan=2 and another with colspan=3 and leave last tr as it is.
Your code should look like this:
<table border="1px">
<tr>
<td colspan="5">5</td>
</tr>
<tr>
<td colspan="2">2</td>
<td colspan="3">3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
Related
I am trying to bring the entry fields closer to the names; it looks bit far. wanted to see if anybody can suggest. Html and css are shown below. This is how it looks now:
<div id="container">
<h3>Add Student</h3>
<form action="StudentControllerServlet" method="GET">
<input type="hidden" name="command" value="ADD" />
<table>
<tbody>
<tr>
<td><label>First name:</label></td>
<td> <input type="text" name="firstName"/></td>
</tr>
<tr>
<td><label>Last name:</label></td>
<td><input type="text" name="lastName"/></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td> <input type="text" name="email" /></td>
</tr>
</tbody>
</table>
</form>
</div>
/* To mimic your screenshot */
#container table {
width: 50%;
outline: red 1px dotted;
}
/* To align your text closer */
#container table td:first-child {
outline: green 1px dashed;
text-align: right;
}
<div id="container">
<h3>Add Student</h3>
<form action="StudentControllerServlet" method="GET">
<input type="hidden" name="command" value="ADD" />
<table>
<tbody>
<tr>
<td><label>First name:</label></td>
<td> <input type="text" name="firstName"/></td>
</tr>
<tr>
<td><label>Last name:</label></td>
<td><input type="text" name="lastName"/></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td> <input type="text" name="email" /></td>
</tr>
</tbody>
</table>
</form>
</div>
I want to figure out this as why the size of my table changes unexpectedly when colspan is applied to one of the cells as indicated by the content of the textbox below:
td {
border: 1px solid navy;
}
table {
margin-left: auto;
margin-right: auto;
font-family: arial;
color: #fff5cc;
margin-top: 100px;
background-color: red;
}
<form method="post" action="" onsubmit="return ValidateForm()">
<table border="1" id="tbl">
<tr>
<td colspan="2">Registration No:</td>
<td colspan="2"><input type="text" name="mid" id="mid" class="txtBx" value="" readonly/></td>
</tr>
<tr>
<td>Payable Month(s):</td>
<td><input type="text" id="" class="txtBx" /></td>
<td>Days(s):</td>
<td><input type="text" id="" class="txtBx" /></td>
</tr>
<tr>
<td colspan="2">Arrears(Rs):</td>
<td><input type="text" id="arrear" class="txtBx" /></td>
</tr>
<tr>
<td><input type="submit" name="sbmit" id="sbmit" value="Confirm" /></td>
</tr>
</table>
</form>
But, when I apply colspan, it becomes like:
Change made to the code:
<tr>
<td colspan="2">Arrears(Rs):</td>
<td colspan="2"><input type="text" id="arrear" class="txtBx" /></td>
</tr>
Why does the cell containing Days(s) shrink and the width of the table decreases?
I want my email, password etc to be the same width as Name and Surname Together but I am struggling to this.
<div id="container">
<table>
<tr>
<td><input type="text" name="emer" placeholder="Emri"></td>
<td><input type="text" name="mbiemer" placeholder="Mbiemri"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="email" placeholder="Emaili"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Password-i"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Rivendos Password-in"></td>
</tr>
</table>
</div>
Like this?
The input elements width needs to be set to 100% to take the width of the container!
td > input{
width:100%;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container">
<table>
<tr>
<td><input type="text" name="emer" placeholder="Emri"></td>
<td><input type="text" name="mbiemer" placeholder="Mbiemri"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="email" placeholder="Emaili"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Password-i"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Rivendos Password-in"></td>
</tr>
</table>
</div>
</body>
</html>
I'm trying to align a text input to the right of a table td but with no results. Here's what i have:
.right {
text-align: right;
}
<table width="100%">
<tr>
<td width="50%"><input type="text" name="nome" id="nome" placeholder="Nome" /></td>
<td class="right"><input type="text" name="email" id="email" placeholder="Email" /></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="msg" id="msg" placeholder="Mensagem" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="sendform" value="Enviar">
</td>
</tr>
</table>
The second <input> is right aligned inside the <td>.
But the <input> also happens to be just as wide as the <td>.
Run this to see what happens after forcing the <td> a bit wider, and the <input> a bit narrower. (I also added borders to make the effect more visible)
td {
border: 1px solid black;
width: 100px;
}
input[type="text"] {
width: 60px;
}
.right {
text-align: right;
}
<table>
<tr>
<td width="50%"><input type="text" name="nome" id="nome" placeholder="Nome" /></td>
<td class="right"><input type="text" name="email" id="email" placeholder="Email" /></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="msg" id="msg" placeholder="Mensagem" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="sendform" value="Enviar">
</td>
</tr>
</table>
I am very new to Bootstrap css, can any one help me to design table header like this, column is seperated by pipe like css
Below is css .
<style>
.table-bordered tbody tr td {
border: none !important;
}
.table-bordered tbody tr td input.form-control[type=text] {
border-radius: 0px !important;
}
#input_container {
position: relative;
direction: rtl;
}
#input_img {
position: absolute;
bottom: 4px;
right: 5px;
width: 24px;
height: 24px;
}
Here i have used "table table-bordered" class for table and using above css i have removed td border lines
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Product Name</th>
<th>Color/Size</th>
<th>Qty. Needed</th>
<th>Need By Date</th>
<th>Special Instructions</th>
<th>Art Files</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" id="Text1" type="text" /></td>
<td>
<div id="input_container">
<input class="form-control" type="text" id="input" value="">
<img src="~/Images/calendarImg.png" id="input_img">
</div>
</td>
<td><input class="form-control" id="Text1" type="text" /></td>
<td>
<input class="form-control" type="text" />
</td>
<td><input class="form-control" id="Text1" type="text" /></td>
<td><input class="form-control" id="Text1" type="text" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6"><a>Add Rows</a></td>
</tr>
</tfoot>
</table>
I have created a demo for you. Take help and modify as per your requirement.
<table frame="box" rules="none" cellpadding="2" cellspasing="5"> <tr style="background-color:yellow; ">
<td colspan="4">
<table style="width:100%">
<tr>
<td style="width:25%;border-right: thin solid #000;">First</td>
<td style="width:25%;text-align:center; border-right: 1px solid #000;">Second</td>
<td style="width:25%;text-align:center;border-right: 1px solid #000;">Third</td>
<td style="width:25%;text-align:center;">Fourth</td>
</tr>
</table>
</td> </tr> <tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr> </tr> </table>
click here to see it in fiddle