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>
Related
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 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.
I've some code like this:
<div class="divleft">
<TABLE class="form-table">
<TR class="heading">
<TD colspan="2" align="left">
<h3>Account description</h3>
</td>
</tr>
<TR>
<TD>Name</TD>
<TD><input name="Naam" id="Naam" type="text" class="InputText" /></TD>
</TR>
and a CSS style on the class heading like this (for testing purposes, not actual styling)
.form-table tr.heading{
border-bottom-width: 10px;
border-bottom-color:black;
}
However, this style is being ignored. When I inspect the element with google chrome tools I cannot see any other stylesheet element that could affect this.
Any ideas on what could be causing this issue?
border-style is missing
.heading{
border-bottom-width: 10px; border-style:solid;
border-bottom-color:black;
}
You can write in single line like this
.heading{
border-bottom: 10px solid black;
}
Below is my code for my website. It works perfectly on firefox but not in chrome or safari. The only thing that doesn't work is the navigation row displays to the right of the header picture and the home button is the full length of the header picture. I think it has something to do with the display:inline in the css but I'm note sure.
<html>
<head>
<title>Workouts</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id = "page">
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
<tr class = "nav" height="30px" width="100%">
<td></td>
<td>Home</td>
<td>About</td>
<td>Workouts</td>
<td>Trainers</td>
<td>Contact</td>
<td></td>
</tr>
<tr class = "content" width="100%">
<td><img width="100%" src="images/content.png" /></td>
</tr>
</table>
</div>
</body>
</html>
This is my stylesheet
* {
margin-top:0;
padding-top:0;
padding-bottom: 0;
margin-bottom: 0;
}
body{
background:pink;
}
.border{
background-color: #c92f51;
}
.nav a{
text-decoration: none;
color:pink;
}
.nav a:hover{
color:gray;
}
.nav td{
display: inline-table;
width: 14.29%;
height="30px";
text-align: center;
font-size: 24px;
color:pink;
}
tr .content{
background:#c92f51;
}
.content td{
background:white;
padding: 30px 30px 30px 30px;
}
Invalid mark-up without DOCTYPE declaration. Check your code by copy/paste in w3c validator check the errors.
Every table row has to have the same number of columns. If you don't, you need a colspan attribute to make up for it.
Also you should not have <div> tags directly instead a table. How browsers handle these types of errors is not very consistent, so it's best to fix them. Try changing:
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
To
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<tr id = "header">
<td colspan="7">
<img src =images/header_logo2.png />
</td>
</tr>
And also add the same colspan on the last row:
<tr class = "content" width="100%">
<td colspan=7><img width="100%" src="images/content.png" /></td>
</tr>
More generally, using tables for layout like this is not good practice nowadays. If you search google for "css layouts vs tables" you can find out a lot more about it.
Use a validator. Your HTML is invalid and at least one of your errors causes significant differences in how different browsers error recover from it.
Some will move the <div> that is a child element of the <table> so it is outside the table (because it isn't allowed there).
You don't have any tabular data in there, so get rid of all the table markup and use something more appropriate (e.g. a list for your list of links and so on).
I have this table:
<table border="1" style="width:100%">
<tr>
<td>Message</td>
<td>Preview:</td>
</tr>
<tr>
<td width="50%">
<div style="float:left;">
<textarea name="message" rows="10" cols="50" onkeyup="preview(this.value)">Enter your message here</textarea>
</div>
</td>
<td style="background-color:rgb(255, 170, 0);" id="preview">
<div>Enter your message here</div>
</td>
</tr>
</table>
It's a textarea with a preview of how it will look next to it.
However, all the text in the preview cell is vertically centered, when I want it to start at the top.
How can I fix this?
<td style="background-color:rgb(255, 170, 0); vertical-align: top;" id="preview"><div>Enter your message here</div></td>
Just add vertical-align: top property and then it should works.
use vertical-align:top (by default it's work for table not other html element)
read this:
http://www.w3.org/wiki/CSS/Properties/vertical-align
add following code in css,
table tr td {
vertical-align:top;
}