I have 2 tables. 1 contains a table of text-boxes and the other contains buttons. I am able to center the table of text-boxes, but not the buttons.
HTML:
<div class="Input">
<table id="InputTable">
<tr></tr>
<th><input type="text" placeholder="foo"></th>
<th><input type="text" placeholder="foo"></th>
<tr></tr>
<th><input type="text" placeholder="foo3"></th>
<th><input type="text" placeholder="foo"></th>
<tr></tr>
<th><input type="text" placeholder="foo"></th>
<th><input type="text" placeholder="foo"></th>
</table>
</div>
<div class="Buttons">
<table id="ButtonTable">
<tr>
<button id="A" type="button">foo</button>
<button id="B" type="button">foo</button>
<button id="C" type="button">foo</button>
</tr>
</table>
</div>
CSS:
#InputTable, #ButtonTable
{
margin: 0 auto;
}
button
{
background-color: #D3D3D3;
color: black;
border: none;
padding: 5px 15px;
text-align: center;
margin: 4px 2px;
}
I have also tried to use "table" in my CSS instead of calling the id's from the HTML separately.
Also tried to add the buttons and text-boxes in 1 table but that doesn't align my together, and I think it would be better to keep them separate as the buttons will be used to calculate values from the text-boxes.
You can place your buttons inside td tags:
#InputTable,
#ButtonTable {
margin: 0 auto;
}
button {
background-color: #D3D3D3;
color: black;
border: none;
padding: 5px 15px;
text-align: center;
margin: 4px 2px;
}
<div class="Input">
<table id="InputTable">
<tr></tr>
<th><input type="text" placeholder="foo"></th>
<th><input type="text" placeholder="foo"></th>
<tr></tr>
<th><input type="text" placeholder="foo3"></th>
<th><input type="text" placeholder="foo"></th>
<tr></tr>
<th><input type="text" placeholder="foo"></th>
<th><input type="text" placeholder="foo"></th>
</table>
</div>
<div class="Buttons">
<table id="ButtonTable">
<tbody>
<tr>
<td>
<button id="A" type="button">foo</button>
</td>
<td>
<button id="B" type="button">foo</button>
</td>
<td>
<button id="C" type="button">foo</button>
</td>
</tr>
</tbody>
</table>
</div>
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'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
I have read through other posts but it seems that using display:inline-block and float:left doesn't fix my problem. Here's what I have:
.leftTable {
display: inline-block;
overflow: auto;
border: solid 1px black;
width: 20%;
}
.rightTable {
display: inline-block;
overflow: auto;
border: solid 1px black;
width: 80%;
}
<table class="leftTable">
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="dairy">
<input type="image" src="<%=request.getContextPath()%>/css/categories/dairy.jpg">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="meat">
<input type="image" src="<%=request.getContextPath()%>/css/categories/meats.jpg">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="bakery">
<input type="image" src="<%=request.getContextPath()%>/css/categories/bakery.jpg">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="fruitveg">
<input type="image" src="<%=request.getContextPath()%>/css/categories/fruit & veg.jpg">
</form>
</td>
</tr>
</table>
<table class="rightTable">
<tr>
<th>img</th>
<th>product name</th>
<th>price</th>
<th>button</th>
</tr>
<tr>
<td></td>
</tr>
</table>
The result I got was
[leftTable]
[IMG]
[IMG]
[IMG]
[IMG]
[rightTable]
[IMG] [Product Name] [Price] [Button]
I want the desired result of
[leftTable] [rightTable]
[IMG] [IMG] [Product Name] [Price] [Button]
[IMG]
[IMG]
[IMG]
I can't seems to spot the mistake, does anyone have suggestion on how to fix this issue?
A simple approach might be to use display: inline-table on your two tables, since you want them to behave like inline elements.
Floats could also work but it depends on other factors in your layout.
.leftTable {
border: 1px dotted blue;
display: inline-table;
vertical-align: top;
}
.rightTable {
border: 1px dotted blue;
display: inline-table;
vertical-align: top;
}
<table class="leftTable">
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="dairy">
<input type="image" src="http://placehold.it/101x50">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="meat">
<input type="image" src="http://placehold.it/102x50">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="bakery">
<input type="image" src="http://placehold.it/103x50">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="fruitveg">
<input type="image" src="http://placehold.it/104x50">
</form>
</td>
</tr>
</table>
<table class="rightTable">
<tr>
<th>img</th>
<th>product name</th>
<th>price</th>
<th>button</th>
</tr>
<tr>
<td></td>
</tr>
</table>
Put the tables inside a container and position the containers next to each other using the float attribute in CSS.
HTML
<div class="table1_con">
<table></table>
</div>
<div class="table2_con">
<table></table>
</div>
CSS
Body, html {width:100%;}
.table1_con {width:20%;
position:absolute;
float:left;
.table2_con {
width:80%;
position:absolute;
float:left;
}
.table1_con .leftTable{
display: inline-block;
overflow: auto;
border: solid 1px black;
width: 100%;
}
.table2_con .rightTable{
display: inline-block;
overflow: auto;
border: solid 1px black;
width: 100%;
}