I am trying to make the following working the way I want it to. I want to have an Input element changing its width to the provided cell's width. Here is code:
<table style="margin-top:10px;width:80.5%;font-size:14px">
<tr>
<td style="text-align:left;width:5%">
<span translate>CaseNumber</span>:
</td>
<td style="text-align:left;width:5%">
<span>
<input easyui-textboxreadonly readonly ng-model="caseid" style="width:80px;height:32px;background-color:#72A4D2"/>
</span>
</td>
<td style="text-align:left;width:2%">
<span translate>Title</span>:
</td>
<td style="width:88%">
<div style="width:100%">
<input easyui-textbox data-options="required:true" ng-model="title" style="height:32px;"/>
</div>
</td>
</tr>
</table>
I want the input in the last cell to take all the width of the cell it's in.
Unless I provide a width of the input it's not happening.
Put width: 100% on the input element itself, not on a div surrounding it (you can get rid of that div altogether in fact).
Demo: http://jsfiddle.net/1qda1jpx/2/
table {
border: 1px solid blue;
}
td {
border: 1px solid lightgray;
}
input {
width: 100%;
}
<table style="margin-top:10px;width:80.5%;font-size:14px">
<tr>
<td style="text-align:left;width:5%">
<span translate>CaseNumber</span>:
</td>
<td style="text-align:left;width:5%">
<span>
<input easyui-textboxreadonly readonly ng-model="caseid" style="width:80px;height:32px;background-color:#72A4D2"/>
</span>
</td>
<td style="text-align:left;width:2%">
<span translate>Title</span>:
</td>
<td style="width:88%">
<input easyui-textbox data-options="required:true" ng-model="title" style="height:32px;"/>
</td>
</tr>
</table>
You need to set width: 100% for that input element. Otherwise it wont happen.
Related
I'm trying to find a solution to laying out forms in our app (ported from Silverlight). We like labels to up, are trying to do this without tables, but there's a fundamental problem that tables solve I'm not sure how to address any other way.
Here is an example (plnkr):
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 1.1rem;
border-bottom: 1px solid #ccc;
}
td {
vertical-align: top;
padding-bottom: 0.5rem;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan='2'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>
label:
<div>(This label is extra</div>
<div>tall because of these</div>
<div> extra lines.)</div>
</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>this is the longest label:</td>
<td><input placeholder='search for stuff'>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>longer label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td colspan='2' class='my-header-style'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>long label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>another label:</td>
<td>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>short label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
</table>
</body>
</html>
We have two groups of "label: input" lists, each with their own headings. The leftmost-column adjusts to the width of the widest label in either group, and simultaneously each row also adjust to the height of the tallest element.
How do I achieve this same behavior without tables? When people are talking about "tableless" layout, is that only for things that don't care about content size for their layout?
EDIT:
Uh, sorry. You actually can do more than two elements per line, but (as usual with float: right) you have to put them in reverse order.
If you must not use a table: Add a div for each row and put a invisible horizontal rule between them to keep them from piling onto each other. Also: a float: left to the labels and a float: right to the input boxes. It works, but I would not know how to make a line with three or more elements, like: Born on: Month/Day/Year, work.
Anyway, here is how you can do it.
<!DOCTYPE=html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
body {
float: left;
}
hr {
clear: both;
border: none;
}
p{
float: left;
}
form {
float: right;
}
</style>
<body>
<div id = "row_1">
<p>looooooooooooo <br /> ooooooooooooo <br /> ooong label: </p>
<form><input type="text" placeholder="Second" /></form>
</div>
<hr />
<div id = "row_2">
<p>short</p>
<form><input type="text" placeholder="First" /></form>
</div>
</body>
</html>
I dont have much experience with CSS, but I am trying to help a friend format a table using CSS. Right now I got stuck trying to format table width, here is an example of the table:
https://form.jotform.com/53306318713148
If I want to change the input of all the fields I can just
table input {
width: 100px;
}
But now we want to have different input sizes for each one of the columns, so after reading about CSS selectors I was trying something of the following:
#cid_1 [id$=_1] {
width: 100px;
}
The thought was that I would select the element with id cid_1 and the the children of that element ending with id _1, but that does not seem to work. Seems like a most element solution would be to use some kind of :nth-child(). Probably a stupid question, butI was hoping someone could show me how to do this.
You can use css3 nth-child selector using this format:
table tr td:nth-child(2) input {
background-color: red;
}
In the example above, the background color of the input inside the second column of each row will become red.
And in your case, you can say:
table tr td:nth-child(2) input {
width: 100px;
}
table tr td:nth-child(3) input {
width: 200px;
}
....
the selector's argument starts with 2, because the first one is labels for each row.
here's a working example
Your css does work, as you can see from this html dump.
#cid_1 [id$="_1"] {
border: 1px solid red;
width: 100px;
}
<ul class="form-section page-section">
<li class="form-line" data-type="control_matrix" id="id_1">
<label class="form-label form-label-top" id="label_1" for="input_1"> </label>
<div id="cid_1" class="form-input-wide jf-required">
<table summary="" cellpadding="4" cellspacing="0" class="form-matrix-table">
<tr>
<th align="left" class="form-matrix-row-headers">
Service Quality
</th>
<td align="center" class="form-matrix-values">
<input id="input_1_0_0" class="form-textbox" type="text" size="5" name="q1_input1[0][]" />
</td>
<td align="center" class="form-matrix-values">
<input id="input_1_0_1" class="form-textbox" type="text" size="5" name="q1_input1[0][]" />
</td>
<td align="center" class="form-matrix-values">
<input id="input_1_0_2" class="form-textbox" type="text" size="5" name="q1_input1[0][]" />
</td>
<td align="center" class="form-matrix-values">
<input id="input_1_0_3" class="form-textbox" type="text" size="5" name="q1_input1[0][]" />
</td>
</tr>
</table>
</div>
</li>
</ul>
I'm having a bit of a problem putting together a HTML email which will render properly in outlook, i had initially got everything working fine through the use of list items and the list-style-image Property, but that isn't supported in outlook.
Basically, i have a table with 2 rows in it, the left hand side one has an 11pixel image being using as a custom bullet point, and on the right hand side is some text.
My problem is no matter what i do i cannot get the column on the left to maintain an 11 pixel width, the columns ALWAYS split equally down the middle of the table. Help please?
HTML
<table>
<tr>
<td>
<img src="Small Image" />
</td>
</tr>
<tr>
<td class="red">
<h4>
TEXT
</h4>
</td>
</tr>
<tr>
<td class="webinar">
<table>
<tr>
<td class="left">
<img src="/Bullet.png" />
</td>
<td class="right">
<p>
TEXT
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
td.webinar .left {
width:11px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar .right {
width:144px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar {
background-color:#ccc6d2;
border:1px solid #313131;
padding-top:8px;
padding-bottom:10px;
}
you want to use css styles in emails? then you are going to have a bad time in most clients..
try to:
<table>
<tr>
<td width="144px">
<img src="Small Image" />
</td>
</tr>
</table>
in email templates you should always apply inline styling as "oldschool" as possible!
I have following markup
<div class="dc2-search-form">
<table width="100%">
<tbody>
<tr>
<td>
<div class="search-form-label">
<span id="StreetAddress_Label">Address</span>
</div><br>
<input style="height: 10px; width:80px" tabindex="0"
type="text" value="">
</td>
<td>
<div class="search-form-label">
<span id="Sales_Cycle_Label">Sales
Cycle</span>
</div><br>
<input style="height: 10px; width: 80px;" tabindex="0" type="text" value="">
</td>
</tr>
</tbody>
</table>
And following CSS
.dc2-search-form {
overflow-x: scroll;
}
.dc2-search-form table {border-collapse:collapse;border-spacing:0;border:0}
.dc2-search-form .search-form-label{font-size:13px;background-color:#BFBFBF;padding:10px 0 10px 1px; border-top:1px solid black;border-bottom:1px solid black;}
.dc2-search-form table select,input{height:10px;font-size:10px;padding:2px;}
Here is the jsfiddle for reference
It gives me the desired output except for a tiny bit space between table cells. I need to make the span div appear as seamless one row with border on top and bottom but I am to able to accomplish that due the space.
How to remove the space between them.
Apply no padding to your table cells:
.dc2-search-form table td{padding:0}
JSFiddle
add cellspacing=0 cellpadding=0 to your table
update fiddle
<table width="100%" cellspacing=0 cellpadding=0>
Try setting the cellpadding and cellspacing to 0, like this:
<table cellpadding='0' cellspacing='0'>
...stuff...
</table>
I have a simple table:
<table class="caspGrid">
<thead></thead>
<tbody>
<tr class="caspRow">
<td class="caspColEntity">
<input type="checkbox"/>
<span>Favorites</span>
<p>(<span>2</span>)</p>
</td>
<td class="caspColSummary">
<p>FY13 SPM Mobility Strategy</p>
<p>FY13 SPM Mobility Strategy</p>
<p>FY13 SPM Mobility Strategy</p>
</td>
<td class="caspColTeam">
<p>Tim Smith</p>
<p>Tim Smith</p>
<p>Tim Smith</p>
</td>
</tr>
</tbody>
</table>
I'd like the table to span the entire page height but I want each <tr> to wrap around the content and the last <tr> to span the rest of the way, how can I do that?
HERE IS A FIDDLE
You can use last-of-type CSS3 pseudo-class:
tr:last-of-type {
height: 100%;
}
this will target only the last tr.
Demo: http://jsfiddle.net/5L7fb/
If you have multiple tables in one page, then you should use descendant or child selectors:
/* Descendant */
table tr:last-of-type {
height: 100%;
}
/* Child */
table > tr:last-of-type {
height: 100%;
}