How to specify cells' width in a table which contains input fields? - html

A table with input field:
table {
border: 1px solid orange;
border-collapse: collapse;
width: 200px;
}
td {
border: 1px solid orange;
padding: .5em;
}
<table>
<tr>
<td style="width:70%"><label>Key</label></td>
<td>Value</td>
</tr>
<tr>
<td><label for="text">Key</label></td>
<td><input type="text" name="text" value="Value"></td>
</tr>
</table>
And a table without input field:
table {
border: 1px solid orange;
border-collapse: collapse;
width: 200px;
}
td {
border: 1px solid orange;
padding: .5em;
}
<table>
<tr>
<td style="width:70%"><label>Key</label></td>
<td>Value</td>
</tr>
<tr>
<td><label for="text">Key</label></td>
<td>Value</td>
</tr>
</table>
So what is the right way to specify cells' width in this case? Really appreciate your help!


UPDATEDjsfiddle . You can give the table table-layout: fixed; and then give to td whatever width you want. Also you should give to input type width 100%;
table{
border: 1px solid black;
table-layout: fixed;
width: 200px;
}
input{
width:100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}


You can use the size Attribute of the input element
<td><input type="text" name="text" value="Value" size="20"></td>


<table>
<tr>
<td>sssss</td>
<td width="80px" style="border:1px solid red;"><input type="text" style="width:100px;"/></td>
</tr>
<tr>
<td>sssss</td>
<td style="border:1px solid green;" ><input type="text" ></td>
</tr>
</table>

Related

How to space out a tables rows while having a border between them?

table {
border-collapse: separate;
border-spacing: 0 15px;
}
tr {
border: 1px solid black;
padding: 5px
}
<form>
<table style="background-color: white; border-spacing: ">
<tr>
<td width="167">Input 1:</td>
<td width="140"><input type="text" name="username" required maxlength="18">
</td>
</tr>
<tr>
<td>Input 2:</td>
<td><input type="password" name="password" required></td>
</tr>
</table>
</form>
I am trying to make a good looking table but I've run into a problem. All the people on the internet say that to space the rows I need to set the ' border-collapse: ' to separate. But then the internet people say that to have the rows be in the same border the ' border-collapse: ' needs to be set to collapse. Is there a way to have both? to have the table have separate spaced out rows that have the same column?
_________________
| cell 1 cell 2|
-----------------
_________________
| cell 3 cell 4|
-----------------
like this ^

Here is an other example with border-radius:
table {
border-collapse: separate;
border-spacing: 0;
}
td {
padding: 5px;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
}
td:first-child {
border-left: solid 1px #000;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
td:last-child {
border-right: solid 1px #000;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
tr.spacer td {
border: 0;
padding: 10px;
}
<form>
<table style="background-color: white; border-spacing: ">
<tr>
<td width="167">Input 1:</td>
<td width="140"><input type="text" name="username" required maxlength="18">
</td>
</tr>
<tr class="spacer">
<td colspan="2"></td>
</tr>
<tr>
<td>Input 2:</td>
<td><input type="password" name="password" required></td>
</tr>
</table>
</form>

Just add a new row between them and give it a class like in example and style it as you need.
table {
border-collapse: collapse;
}
tr {
border: 1px solid black;
}
td {
padding: 5px
}
tr.spacer {
border: 0;
}
tr.spacer td {
padding: 15px;
}
<form>
<table style="background-color: white; border-spacing: ">
<tr>
<td width="167">Input 1:</td>
<td width="140"><input type="text" name="username" required maxlength="18">
</td>
</tr>
<tr class="spacer">
<td colspan="2"></td>
</tr>
<tr>
<td>Input 2:</td>
<td><input type="password" name="password" required></td>
</tr>
</table>
</form>

How to add horizontal lines in Table

I want two horizontal between both records and some extra bottom padding to add a symbol
Edit/update :
I am hard-coding what I want as below
table {
border: 1px solid black;
padding: 0em 2em;
}
tr {
border: 1px solid black;
padding: 0em 2em;
}
tr:nth-child(3) {
margin: 0px;
padding: 0px;
}
tr:nth-child(7) {
background-color: red
}
td:nth-child(21) {
border-bottom: 1px solid blue;
}
<table>
<tr>
<th colspan="2">Old_records</th>
<td>32</td>
</tr>
<tr>
<th>Records_fetched</th>
<td colspan="2">100</td>
</tr>
<tr>
<td colspan="3"> -----------------------------</td>
</tr>
<tr>
<th>Sum </th>
<td colspan="2">132</td>
</tr>
<tr>
<th>New_records</th>
<td></td>
<td>80</td>
</tr>
<tr>
<td colspan="3"> -----------------------------</td>
</tr>
<tr>
<th>Differnce </th>
<td colspan="2">52</td>
</tr>
</table>
Still I need symbols to be added and I an better way to add border instead of this row <tr><td colspan="3"> -----------------------------</td></tr>
Can someone suggest me how to do that it properly?

Add border in tr and apply border-collapse:collapse for table.
table {
border: 1px solid black;
padding:0em 2em;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid black;
}
td {
padding: 2em;
}
<table>
<tr>
<th>Old_records</th>
<td> 32 </td>
</tr>
<tr>
<th>Records_fetched</th>
<td>100</td>
</tr>
<tr>
<th>NEw_records</th>
<td>80</td>
</tr>
</table>

Try the below code
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>Old_records</th>
<td> 32 </td>
</tr>
<tr>
<th>Records_fetched</th>
<td>100</td>
</tr>
<tr>
<th>NEw_records</th>
<td>80</td>
</tr>
</table>

To insert an empty row, you can write:
<tr>
<td colspan="2"> </td>
</tr>
For extra padding, where you need - just add a class="extra-padding-bottom" attribute
And add appropriate CSS code:
.extra-bottom-padding {
padding-bottom: 100px;
}
For example <td class="extra-padding-bottom">

table {
border: 1px solid black;
padding: 0em 2em;
}
tr {
border: 1px solid black;
padding: 0em 2em;
}
tr:nth-child(3) {
margin: 0px;
padding: 0px;
}
tr:nth-child(even) > th,
tr:nth-child(even) > td {
padding-bottom: 0.75em;
border-bottom: 1px dashed #222;
}
tr:nth-child(odd) > th,
tr:nth-child(odd) > td {
padding-top: 0.75em;
}
<table>
<tr>
<th colspan="2">Old_records</th>
<td>32</td>
</tr>
<tr>
<th>Records_fetched</th>
<td colspan="2">100</td>
</tr>
<tr>
<th>Sum </th>
<td colspan="2">132</td>
</tr>
<tr>
<th>New_records</th>
<td></td>
<td>80</td>
</tr>
<tr>
<th>Differnce </th>
<td colspan="2">52</td>
</tr>
</table>

The solution worked for me is defining css properties at column level and defining colspan as the number of columns in the table
HTML -
<tr class="border_bottom">
<td colspan="6"></td>
</tr>
CSS -
tr.border_bottom td {
border-bottom: 1px solid #cccccc;
color: #707070;
}
table {
border-collapse: collapse;
}

<tr>
<td><hr> </td>
<td><hr> </td>
</tr>
I tried this, it worked

How to properly format tables using css

I want the outer borders of my table be dashed, while the inner borders be solid. So I made these css codes for my normal-table, but whole table border is solid.
.zulu-post .zulu-content .normal-table{
color: #444444;
border: 1px dashed #444444;
}
.zulu-post .zulu-content .normal-table td, .normal-table tr{
padding: 10px;
border: 1px solid #444444;
}
<table border="1" cellpadding="1" cellspacing="1" class="normal-table" style="width:500px;">
<tbody>
<tr>
<td>Table Name</td>
</tr>
<tr>
<td>Make sure that Stylesheet Classes is normal-table</td>
</tr>
<tr>
<td>Text Here...</td>
</tr>
</tbody>
</table>

This is one way of doing what you want:
Basically you add border left and top to all <td> tags and than remove the border from the sides of the table, and you use dashed border on <table>.
.normal-table {
color: #444444;
border: 1px dashed #444444;
}
.normal-table td {
padding: 10px;
border-left: 1px solid #444444;
border-top: 1px solid #444444;
}
.normal-table td:first-child {
border-left: none;
}
.normal-table tr:first-child td {
border-top: none;
}
<table cellpadding="1" cellspacing="0" class="normal-table" style="width:500px;">
<tbody>
<tr>
<td>Table Name</td>
</tr>
<tr>
<td>Make sure that Stylesheet Classes is normal-table</td>
</tr>
<tr>
<td>Text Here...</td>
</tr>
</tbody>
</table>

1st make use of border-collpase:collapse, this collapse the table border to single border then do styling part for table, tbody, tr and such.
.normal-table {
border: 2px solid red;
border-collapse: collapse;
}
tr {
border: 2px dashed red;
}
<table border="1" cellpadding="1" cellspacing="1" class="normal-table" style="width:500px;">
<tbody>
<tr>
<td>Table Name</td>
</tr>
<tr>
<td>Make sure that Stylesheet Classes is normal-table</td>
</tr>
<tr>
<td>Text Here...</td>
</tr>
</tbody>
</table>

You can use divs as an alternative:
.container {
width: 100%;
border: medium dashed darkgray;
display: table;
}
.cell {
width: 30%;
border: thin solid red;
height: 50px;
display: table-cell;
}
<div class='container'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>

Prevent <td> from expanding when inserting content

I have a table of fixed width and height containing three rows and columns. Rows and columns are automatically equal size, but when I put innerHTML (or image) into table cell, cell with text inside expands at the cost of other columns. How to prevent table cells from expanding after inserting content inside? I've tried solutions from similar stack overflow questions, but nothing worked.
JS fiddle: https://jsfiddle.net/m20akmdx/14/
document.getElementById('8').innerHTML = 'R';
table {
width: 360px;
height: 360px;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>

Try using fixed table layout.
table {
table-layout: fixed;
...
}
And adding a no-break space into each cell.
td:after {
content: "\00A0";
}
document.getElementById('8').innerHTML = 'R';
table {
table-layout: fixed;
width: 360px;
height: 360px;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
text-align: center;
}
td:after {
content: "\00A0";
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>

Set the width and height of the td elements rather than a width and height for the table and you will get the desired behaviour.
document.getElementById('8').innerHTML = 'Raaaa';
table{
border: 1px solid black;
border-collapse: collapse;
}
td{
width:120px;
height:120px;
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>

set a max-width
td{
border: 1px solid black;
text-align: center;
max-width: 200px;
}
or
td{
border: 1px solid black;
text-align: center;
max-width: 30%;
}

You will need to specify the td width, and maybe the height as well:
https://jsfiddle.net/m20akmdx/23/
document.getElementById('8').innerHTML = 'my long text gets wrapped';
table {
width: 360px;
height: 360px;
border: 1px solid black;
border-collapse: collapse;
}
td {
width: calc(100% / 3);
height: calc(100% / 3);
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>

Tables not styled properly

I'm new to html and I'm trying to create tables and style them but they are not styled as I'd like: http://jsfiddle.net/DpLy5/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabeller</title>
<style>
body{
padding-top: 20px;
padding-left: 20px;
}
</style>
</head>
<body>
<table style="border: 1px solid black;">
<tr>
<td style="width: 700px; height:150px; border: 1px solid black;">
<img src="http://placehold.it/700x150">
</td>
</tr>
<tr>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
<td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
</tr>
<tr>
<td style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;"></td>
</tr>
</table>
</body>
</html>
The middle row first column should be 150px wide but its bigger then that. I don't know what it could be. Any help? Thank you

You need to add a colspan='3' on your first and third row tr. As you have it set to 700px and it's a single column it will push the one above/below it to the same:
http://jsfiddle.net/spacebean/DpLy5/1/
<table style="border: 1px solid black;">
<tr>
<td style="width: 700px; height:150px; border: 1px solid black;" colspan='3'>
<img src="http://placehold.it/700x150">
</td>
</tr>
<tr>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
<td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
</tr>
<tr>
<td style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;" colspan='3'></td>
</tr>
</table>
Also, I highly suggest using non-inline styling as it will make it a lot easier to see what you are doing and separate style from content.
http://jsfiddle.net/spacebean/DpLy5/8/
<table class='myTable'>
<thead>
<tr>
<th colspan='3'>
<img src="http://placehold.it/700x150" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>adad</td>
<td class='main'>adad</td>
<td>adad</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
</tr>
</tfoot>
</table>
css:
.myTable {
width: 700px;
}
.myTable td, .myTable th {
border: solid 1px black;
}
.myTable thead th {
height:150px;
}
.myTable tbody td {
width: 150px;
height:700px;
background-color: #808080;
}
.myTable tbody td.main {
width: 400px;
background-color: #fff;
}
.myTable tfoot td {
height:75px;
background-color: #808080;
}

Make the td in the first tr span the three columns using colspan="3" similar to the td in the last tr.
<td colspan="3" style="width: 700px; height:150px; border: 1px solid black;">
<img src="http://placehold.it/700x150">
</td>
JS Fiddle: http://jsfiddle.net/DpLy5/3/

you will need to add colspan="3" to in first row & last row... that's it.
http://jsfiddle.net/DpLy5/6/
<table style="border: 1px solid black;">
<tr>
<td colspan="3" style="width: 700px; height:150px; border: 1px solid black;">
<img src="http://placehold.it/700x150">
</td>
</tr>
<tr>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
<td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
</tr>
<tr>
<td colspan="3" style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;"></td>
</table>

You are in need of the colspan attribute. The colspan attribute in fact says "Let me span this amount of column in the table".
Which means colspan="3" is translated to "Let me span 3 columns in the table"
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span
However, according to your JSFiddle, you are trying to make a raster for your layout. Achieving this with the use of table's is a no-go, it's a major bad practice.
This is because a table is something where you put data in, and an entire layout is not data.
The best way to set up and layout is using Div's. http://www.w3schools.com/html/html_layout.asp