Running on Chrome displays the expected result. Running same code on Mozilla-Firefox displays unexpected result. So, what will be the solution to get the Chrome result in Mozilla-Firefox?
textarea{
height : 100%;
position:absolute;
}
<table>
<tr>
<td><input type="text"></td>
<td rowspan=4><textarea></textarea></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td rowspan=4><textarea></textarea></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
</table>
Don't forget! Height of an element is relative to its parent.
You want to set the height to an element which has no information how high is height. You have to give the parent element a height. Look at this:
tr, td, textarea {
height: 100%;
}
<table>
<tr>
<td><input type="text"></td>
<td rowspan=4><textarea></textarea></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
</table>
You can set the textarea to position: absolute. Tested and works on Firefox Mac.
.textarea-td {
position: relative;
}
textarea{
height : 100%;
position: absolute;
top: 0;
box-sizing: border-box
/* so it really takes the same height as the inputs */
}
<table>
<tr>
<td><input type="text"></td>
<td rowspan=4 class="textarea-td"><textarea></textarea></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
</table>
You can Try This type of Manner styling in your table then its resolves easily ,So Please mention height and widths for your table and for its inner elements always .
textarea{ height : 100%; }
td{padding-right:10px;}
<table width="100%">
<tr height="25">
<td><input type="text" style="width:100%;"></td>
<td rowspan=4><textarea style="width:100%;"></textarea></td>
</tr>
<tr height="25">
<td><input type="text" style="width:100%;"></td>
</tr>
<tr height="25">
<td><input type="text" style="width:100%;"></td>
</tr>
<tr height="25">
<td><input type="text" style="width:100%;"></td>
</tr>
</table>
I know this is a hack, but you can use position absolute to the textarea, so it can set its height to 100%.
.textarea-wrapper {
position: relative;
}
textarea{
height : 100%;
/* firefox fix */
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
<table>
<tr>
<td><input type="text"></td>
<td class="textarea-wrapper" rowspan=4><textarea></textarea></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
</table>
Related
The second table header shows another element when is hovered. The problem is that when is hovered it loses the position sticky in MS Edge, and the element stuck when the table is scrolled. It works fine in Chrome and Firefox.
I discovered that it works if the html does not include a DOCTYPE I do not know if is relevant.
td, th {
padding: 5px 15px;
}
th {
position: sticky;
top: 0;
background: black;
color: white;
}
th:hover .disp{
display: inline;
}
.disp {
display: none;
position: relative;
}
.container {
height: 180px;
overflow: scroll;
}
<body>
<div class="container">
<table id="tableId" height="360">
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>Size<div class="disp">hi</div></th>
<th>File</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>103Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>12Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>14Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
</body>
I tested the issue with the MS Edge legacy browser 44.18362.449.0 and I can see the issue there.
I check the code and it looks like position: absolute; in .disp class causing this issue.
I Check the documentation but I did not get any information about this behavior.
If you set position as relative or static than the issue can be solved. You can use it as a workaround for this issue.
Code:
td, th {
padding: 5px 15px;
}
th {
position: sticky;
top: 0;
background: black;
color: white;
}
th:hover .disp{
display: block;
align-items: center;
}
.disp {
display: none;
position: relative;
right: 8px;
top: 8px;
}
.container {
height: 180px;
overflow: scroll;
}
<div class="container">
<table id="tableId" height="360">
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>Size<div class="disp">hi</div></th>
<th>File</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>103Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>12Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>14Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>16Mb</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
Output:
Edit:
If you set display: inline-table;. It will help to fix the issue and both elements will display in the same line.
Output:
i have a table like below where the scrollbar is working in IE 11 with scroll=yes, but the same is not working in Chrome.Any suggestion or help would be appreciated . thank you.
table,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
text-align: left;
}
<body scroll="yes" scrolling="yes">
<table style="width:100%">
<tr>
<td width="25%"><label>name </label></td>
<td width="75%"><input type="text"></td>
</tr>
<tr>
<td width="25%"><label>last name </label></td>
<td width="75%"><input type="text"></td>
</tr>
<tr>
<td width="25%"><label>middle name </label></td>
<td width="75%"><input type="text"></td>
</tr>
<tr>
<td width="25%"><label> name </label></td>
<td width="75%"><input type="text"></td>
</tr>
</table>
Neither of those attributes on the body element are supported in anything other than Internet Explorer. In fact, the Mozilla Developer Network website doesn't list it as an attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
I would recommend doing it in css instead using overflow, overflow-x or overflow-y
Simply add overflow-y:auto to your body tag and that should work. (or overflow-y:scroll)
table,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
text-align: left;
}
<body scroll="yes" scrolling="yes" style='overflow-y: auto;'>
<table style="width:100%">
<tr>
<td width="25%"><label>name </label></td>
<td width="75%"><input type="text"></td>
</tr>
<tr>
<td width="25%"><label>last name </label></td>
<td width="75%"><input type="text"></td>
</tr>
<tr>
<td width="25%"><label>middle name </label></td>
<td width="75%"><input type="text"></td>
</tr>
<tr>
<td width="25%"><label> name </label></td>
<td width="75%"><input type="text"></td>
</tr>
</table>
I am writing my final project at PHP and JS. I need help with the html and CSS styling.
This is my sign form, I want help in 2 things.
I want to do that the whole row (tr) that include th while be with border, now I know to do it only that every th have border.
I want to divide the table to sections and to style every section in other CSS code.
How can I do it?
This my HTML code:
<body>
<form>
<table id="t">
<tr>
<th>Basic info</th>
<th>Contact info</th>
<th>About me</th>
</tr>
<tr>
<td><input placeholder="First name"></td>
<td><input placeholder="Phone"></td>
<td rowspan="3"><textarea rows="8" placeholder="About me"></textarea></td>
</tr>
<tr>
<td><input placeholder="Last name"></td>
<td><input placeholder="Area"></td>
</tr>
<tr>
<td><input placeholder="Degree"></td>
<td><input placeholder="Email"></td>
</tr>
<tr><th colspan="2">Social networks</th></tr>
<tr>
<td><input row placeholder="Facebook link"></td>
<td><input row placeholder="Website link"></td>
</tr>
<tr>
<td><input row placeholder="Twitter link"></td>
<td><input row placeholder="Medium link"></td>
</tr>
<tr>
<td><input row placeholder="Instagram link"></td>
<td><input row placeholder="Google link"></td>
</tr>
<tr><td colspan="2"><button type="submit">שלח</button></td></tr>
</table>
</form>
</body>
This is my CSS:
table{
margin: 16px;
text-align: center;
}
td{
padding: 10px;
justify-content: space-between;
}
#t textarea{
width: 100%;
height: 100%;
}
tr>th{
margin-top: 10px;
border: 1px solid red;
}
For (1), tr's can only have borders when the table is border-collapse:collapse.
For (2), you can put rows in <thead>, <tbody>, <tfoot> sections and style those separately.
Maybe you can have multiple <tbody> sections and use nth-of-type to select them but I don't know.
Differences in the below
addition of thead, tbody, tfoot in the html
style tbody as an example
border-collapse:collapse on the table style
tr style on the first tr
table {
margin: 16px;
text-align: center;
border-collapse: collapse;
}
td {
padding: 10px;
justify-content: space-between;
}
#t textarea {
width: 100%;
height: 100%;
}
tbody {
font-style: italic;
}
<form>
<table id="t">
<thead>
<tr style="border:solid 1px">
<th>Basic info</th>
<th>Contact info</th>
<th>About me</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input placeholder="First name">
</td>
<td>
<input placeholder="Phone">
</td>
<td rowspan="3">
<textarea rows="8" placeholder="About me"></textarea>
</td>
</tr>
<tr>
<td>
<input placeholder="Last name">
</td>
<td>
<input placeholder="Area">
</td>
</tr>
<tr>
<td>
<input placeholder="Degree">
</td>
<td>
<input placeholder="Email">
</td>
</tr>
<tr>
<th colspan="2">Social networks</th>
</tr>
<tr>
<td>
<input row placeholder="Facebook link">
</td>
<td>
<input row placeholder="Website link">
</td>
</tr>
<tr>
<td>
<input row placeholder="Twitter link">
</td>
<td>
<input row placeholder="Medium link">
</td>
</tr>
<tr>
<td>
<input row placeholder="Instagram link">
</td>
<td>
<input row placeholder="Google link">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button type="submit">שלח</button>
</td>
</tr>
</tfoot>
</table>
</form>
I have a table in bootstrap 3
<table class="table table-bordered table-condensed">
<tbody>
<tr>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
</tbody>
</table>
Can I make the input fields look like normal cells? I want the input fields to fill out the entire cells (without no input margin nor table cell padding). Just like an Excel spreadsheet where I have many cells and can write in each of them.
Yup. Do it this way:
input {display: block; padding: 0; margin: 0; border: 0; width: 100%;}
td {margin: 0; padding: 0;}
Fiddle: http://jsbin.com/biqomurafage/1
You could also try using contentEditable tables like this: DEMO
<table>
<tbody>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<th>1</th>
<td><span id="A1" contenteditable>#####</span></td>
<td><span id="B1" contenteditable></span></td>
<td><span id="C1" contenteditable></span></td>
</tr>
<tr>
<th>2</th>
<td><span id="A2" contenteditable></span></td>
<td><span id="B2" contenteditable></span></td>
<td><span id="C2" contenteditable></span></td>
</tr>
</tbody>
</table>
span {
width: 100%;
display: block;
}
*note, the content editable spans are required for IE to handle the contentEditable attributes correctly. Reference
I'm trying to create a form that clients would complete via the web, so far I've resorted to using various tables butted up against each other to get the view I'm looking for, one of the issues is that when the tables are next to each other the borders appear twice as thick.
I think I could probably turn certain borders on and off but this would be a pain to manage, is there a better way I should be doing this?
My form looks something like this (jsfiddle at http://jsfiddle.net/5AXKa/)
<html>
<head>
<style type="text/css">
#form table
{
width:100%;
}
td
{
border: 1px solid black;
}
table
{
border:1px solid black;
}
#form
{
width:1000px;
/*border:1px solid black;*/
}
.field
{
border-right:none;
}
table, tr, td
{
border-collapse:collapse;
}
#Logo
{
width:30%;
}
#TestName
{
width:40%;
}
#TestNumber
{
width:30%;
}
#heading
{
height:70px;
}
.title
{
text-align:center;
}
.Data
{
border-left:none;
border-right:none;
}
</style>
</head>
<body>
<div id="form">
<table>
<tr id="heading">
<td id="Logo">LOGO GOES HERE</td>
<td id="TestName">TEST NAME</td>
<td id="TestNumber">TEST NUMBER</td>
</tr>
</table>
<table id="CommonData">
<tr>
<td class="field">CLIENT:-</td>
<td class="data"></td>
<td class="field">SITE:-</td>
<td class="data"></td>
<td class="field">Contract NO:-</td>
<td class="data"></td>
</tr>
<tr>
<td class="field">DUTY:-</td>
<td class="data"></td>
<td class="field">TAG No:-</td>
<td class="data"></td>
<td class="field">Loop No:-</td>
<td class="data"></td>
</tr>
<tr>
<td class="field">SYSTEM No:-</td>
<td class="data"></td>
<td class="field">SYSTEM REF:-</td>
<td class="data"></td>
<td class="field">DWG No:-</td>
<td class="data"></td>
</tr>
<tr>
<td class="field">CTP No:-</td>
<td class="data"></td>
<td colspan="4"></td>
</tr>
</table>
<table>
<tr class="title">
<td>INSTRUMENT / APPLIANCE</td>
</tr>
</table>
<table style="float:left;width:50%">
<tr>
<td colspan="2">INSTRUMENT DETAILS:</td>
</tr>
<tr>
<td>MANUFACTURER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SERIAL No:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SIZE:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SERVICE DATA SHEET REF:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>POWER SUPPLY:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>MODEL NO:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>IP RATING:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>RANGE/SPAN</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
</table>
<table style="float:right; width:50%">
<tr>
<td>INSTRUMENT TYPE</td>
<td>TICK BOX</td>
</tr>
<tr>
<td>PROXIMITY SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>LIMIT SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>FLOAT SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>ULTRASONIC</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>THERMOCOUPLE</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>PRESSURE SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>f
</tr>
<tr>
<td>TEMPERATURE SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>FLOW SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>CONDUCITIVITY METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>TURBIDITY METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>CHEMICAL RESIDUAL ANALYSER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>FLOW METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>PH METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
</table>
<table>
<tr class="title">
<td>MONITOR / CONVERTER</td>
</tr>
<table>
<table>
<tr>
<td>PLANT UNIT:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
<td>INSTRUMENT TYPE:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SERIAL No:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
<td>SPAN:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>POWER SUPPLY:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
<td>OTHER:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<table>
</body>
</html>
Simplify your table structure. If possible, use a single table, with one item on one row—there is normally no need to simulate printed forms (where you try to put everything on one sheet of paper) when designing a web form. Don’t use all uppercase, and put heading-like items in bold to clarify the structure of the form. Do not set widths for cells—it is part of the basic benefits of using tables that you can leave width allocation to browsers.
Your problems with borders are just one symptom of too complicated a design. When using a single table, adjacent browsers collapse when you just set cellspacing=0 in the table tag or border-collapse: collapse in CSS.
Instead of using a bunch of tables with a single div, you can use divs and specify the margin around the div.
This is a beginning.
Use a fieldset for each column.
Put every label and input in a div.
CSS:
fieldset {
float: left;
}
label {
clear: both; // Start the label at a new line
display: block;
float: left;
width: 100px;
{
input {
display: block;
float: left;
}
HTML:
<div><label for="field1">Field1</label><input type="text" name="field1" id="field1" /></div>
<div><label for="field1">Field2</label><input type="text" name="field2" id="field2" /></div>
etc...