I am trying to create a table in which the border will appear like a login box.
<table border="1">
<tr>
<td>Username: </td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td><input type="submit" value="Log In" /></td>
</tr>
</table>
What happens is that even the table cells have border and the border sucks. I want to remove cell border. The border should only be wrapping around the table. I am totally new to this.
Thanks in advance.
Use CSS
<style type="text/css">
.loginbox {
border-collapse: collapse;
border-width: 1px;
border-style: solid
}
</style>
<table class="loginbox">
<tr>
<td>Username: </td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Log In" /></td>
</tr>
</table>
FYI: I added colspan="2" to your last <td> in order to make the border go all the way around.
If you use the following css,
table {
border: thin solid black;
}
that will give you a border around the table only, you can see a jsfiddle for it at http://jsfiddle.net/2CdwW/
Use CSS to put the border on the table instead:
<table style="border: 1px solid black">
<tr>
<td>Username: </td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Log In" /></td>
</tr>
</table>
Related
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 two different tables and on the second table I want to apply the border="border" atttribute as CSS. How can accomplish this correctly?
<table>
<!-- Text widgets for the customer's name and address -->
<tr>
<td>Buyer's Name:</td>
<td>
<input type="text" name="name" size="30" />
</td>
</tr>
<tr>
<td>Street Address:</td>
<td>
<input type="text" name="street" size="30" />
</td>
</tr>
<tr>
<td>City, State, Zip:</td>
<td>
<input type="text" name="city" size="30" />
</td>
</tr>
</table>
<table class="tableProduct">
<!-- First, the column headings -->
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<!-- Now, the table data entries -->
<tr>
<td>Unpopped Popcorn (1 lb.)</td>
<td>$3.00</td>
<td class="tdcenter">
<input type="text" name="unpop" size="3" />
</td>
</tr>
<tr>
<td>Caramel Popcorn (2 lb. canister)</td>
<td>$3.50</td>
<td class="tdcenter">
<input type="text" name="caramel" size="3" />
</td>
</tr>
<tr>
<td>Caramel Nut Popcorn (2 lb. canister)</td>
<td>$4.50</td>
<td class="tdcenter">
<input type="text" name="caramelnut" size="3" />
</td>
</tr>
</table>
I tried creating the classs tableProduct with the following:
.tableProduct {
border: 1px solid black;
border-collapse: collapse;
}
But it just creates a border around the table. I want it to create a border within each cell.
Here we go ... you weren't that far from it
.tableProduct {
border-collapse: collapse;
}
.tableProduct th, /* this line is for the headers */
.tableProduct td {
border: 1px solid black;
}
<table>
<!-- Text widgets for the customer's name and address -->
<tr>
<td>Buyer's Name:</td>
<td>
<input type="text" name="name" size="30" />
</td>
</tr>
<tr>
<td>Street Address:</td>
<td>
<input type="text" name="street" size="30" />
</td>
</tr>
<tr>
<td>City, State, Zip:</td>
<td>
<input type="text" name="city" size="30" />
</td>
</tr>
</table>
<table class="tableProduct">
<!-- First, the column headings -->
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<!-- Now, the table data entries -->
<tr>
<td>Unpopped Popcorn (1 lb.)</td>
<td>$3.00</td>
<td class="tdcenter">
<input type="text" name="unpop" size="3" />
</td>
</tr>
<tr>
<td>Caramel Popcorn (2 lb. canister)</td>
<td>$3.50</td>
<td class="tdcenter">
<input type="text" name="caramel" size="3" />
</td>
</tr>
<tr>
<td>Caramel Nut Popcorn (2 lb. canister)</td>
<td>$4.50</td>
<td class="tdcenter">
<input type="text" name="caramelnut" size="3" />
</td>
</tr>
</table>
You need to apply the styling to the th and td elements as well.
table, th, td {
border: 1px solid black;
}
You can read up on table styling more here.
table.tableProduct td {
border: 1px black solid;
border-collapse: collapse;
}
That will put a border around all of your table datas individually.
For good measure, you might want to add border-collapse in there. That way you're looking at one solid border, instead of two competing border lines - one from the table and one from the table data.
Edit: With css Combinators! By putting a space between table.tableProduct and td, we're saying, please apply these CSS rules to all td elements that a descendants of a table element with the class tableProduct.
I am having trouble getting a border on a table. Here is the html for the table it shows having a border in Dreamweaver but not on the live webpage. I also have other tables on the page and do not want them to have the borders just this one.
<table style="width: 100%;" border="1" bordercolor="#000000">
<tr>
<td colspan="2" align="center" valign="middle">Please comeplete form</td>
</tr>
<tr>
<td width="50%">Event Name:</td>
<td>
<input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>Date (YYYY-MM-DD):</td>
<td>
<textarea name="date" id="date"></textarea></td>
</tr>
<tr>
<td>Link to page:</td>
<td>
<input type="text" name="link" id="link"></td>
</tr>
<tr>
<td>Status:</td>
<td>
<input type="text" name="status" id="status"></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle"><input type="submit" name="submit" id="submit" value="Submit"></td>
</tr>
</table>
You can add CSS to bring it up to standard
Something like:
table.mytable{
border: 1px solid #000000;
}
and then add a class="mytable" attribute to your table
You can initially style it like:
table,td,th {
border-collapse:collapse;
border: 1px solid #000000;
}
And in this way further you can add this as a class.