I want to know how can I set my desired width for all the and in my tables. What happens is that when I declare something like <th> Employee Code </th>, it will separate the Employee and Code and creating two lines. This usually happens when the data is shorter than the table header. I want to make my table go wider when the table data is long and not go taller like what is happening right now. Please help...
You can enclose the parts that you don't want broken across the line with a <nobr> </nobr> tag. The browser will not wrap this part of the text.
You can use the Colspan property like <th COLSPAN=2> Employee Code </th>
Colspan indicates the number of columns a cell should take up. There is also Rowspan property.
use css:
table.mytable th
{
height:20px;
text-align:center;
font-weight:bold;
font-family:arial;
font-size:12px;
background-color:yellow;
width:100px;
}
table.mytable td
{
height:20px;
text-align:center;
font-weight:bold;
font-family:arial;
font-size:12px;
width:100px;
}
The CSS attribute min-width was designed for this and compatibility is good. Except for IE6.
Related
I am trying to pick a specific width for a td element. When i use style such asd
<style>
td.ex{
width:105px;
}
</style>
and then apply that to the td element like this
<td class="ex">
</td>
it doesnt do anything however if i do this
<style>
td{
width:105px;
}
</style>
it applies it to all td elements which is not what i want. Any help would be appreciated.
Targeting by classname works just fine.
td.ex{
width:105px;
border: 1px solid black;
}
<table>
<tr>
<td class="ex">asdf</td>
</tr>
</table>
I assume this is not possible. You can't change only one <td>'s width, while others have different size, since all cells in a column must have the same size (if your table has only one row, this is true). You didn't show your HTML code, so we don't know if this is the case.
However, you can change each <td>'s padding one-by-one to whatever you want. This can also reduce the cell's size, but the <td> element will actually fit the column's width - which is similar to what you want, I think.
I want to display a list of complex records and trying to simply fit it into a table doesn't seem to be working very well.
I'd like a layout that goes something like this:
Each whole record could be put into a table cell (one cell per row), and then I could use <div> tags within each cell. Is putting divs into table cells likely to cause display problems? It could be simply done with divs anyway, so perhaps that's a bad idea.
Within each record, there are quite a number of components. If I lay these out with divs, what do I need to do to ensure each label/value pair is in the right position? Or is there some better way to ensure a consistent layout?
Obviously the values for each record will be different so to maintain a consistent look I would need the labels to all line up vertically.
If the question seems a bit vague, then it's because my understanding of how to do it is vague... even some help clarifying the question would be great!
Using divs in table cells is fine. Shouldn't cause issues.
Although looking at your mockup, semantically I would say its not a table. No columns, column headings etc.
It looks more like a list of items with more details in them.
I'd use a ul with li's and divs inside to lay things out further.
Also if you need the ID sitting exactly like that you could use a legend element inside each li.
If you are looking at HTML 5, the article tag might fit here. The fact that you have an "Author Element" seems to make it a good fit. If you are not looking at HTML 5 just use a div instead of article. Or as #Moin Zaman mentioned use ul and use li in place of article in my example below.
As for ensuring your labels etc line up vertically this is fairly easy to achieve. Just explicitly set the widths via css.
Here is a quick example:
HTML
<article>
<h2>ID: 123</h2>
<div class="actions">
<input type="button" value="Do Someting" />
<input type="button" value="Do Someting Else" />
<input type="button" value="And Maybe something Else" />
</div>
<div class="description">A fairly long description that takes up basically the entire width of the section, maybe even longer still</div>
<div class="details">
<div class="author"><span>Author:</span>Douglas Adams</div>
<div class="created"><span>Created:</span>1 Jan 2012</div>
<div class="label first"><span>Label 1:</span>Value</div>
<div class="label"><span>Label 2:</span>Value</div>
<div class="label"><span>Label 3:</span>Value</div>
<div style="clear:both; line-height:0px;"> </div><!-- Use A Clear Fix Instead of this, I got Lazy!! -->
</div>
</article>
CSS
article
{
border: solid 2px black;
margin:20px;
padding:5px;
position:relative;
}
article h2
{
background:#FFF;
padding:5px 8px;
position:relative;
top:-15px;
left:5px;
display:inline;
}
article .actions
{
float:right;
width:25%;
text-align:right;
position:relative;
}
article .actions input
{
display:block;
float:right;
clear:both;
}
article .details
{
position:releative;
width:70%;
}
.author
{
float:left;
width:60%;
}
.created
{
float:left;
width:40%
}
.label
{
float:left;
width:30%;
}
.label span, .author span, .created span
{
font-weight:bold;
padding-right:3px;
}
See this fiddle
Note: Use a clear fix instead of having the clearing div.
How about something like this.
HTML
<div>
<span class="label">ID 345</span>
<table>
<tr>
<td class="desc" colspan="3">A fairly long description that takes up basically the entire width of the section, maybe even longer still</td>
<td rowspan="3" class="doStuff">Do Something<br />Do another thing<br />Maybe 1 more thing</td>
</tr>
<tr>
<td class="author"colspan="2"><span>Author: </span>Joe Bloggs</td>
<td class="created"><span>Created: </span>19th June 2012</td>
</tr>
<tr>
<td class="label3"><span>Label 3: </span>Value</td>
<td class="label4"><span>Label 4: </span>Value</td>
<td class="label5"><span>Label 5: </span>Value</td>
</tr>
</table>
</div>
CSS
div{
margin:17px 10px;
border:2px solid #000;
}
span.label{
background:#FFF;
padding:5px 8px;
position:relative;
top:-10px;
left:5px;
}
table{
width:100%;
}
tr{
background:#ccc;
}
td{
padding:5px 7px;
}
span{
font-weight:bold;
}
jsFiddle - http://jsfiddle.net/QActK/
On the main page of my website I have a problem concerning the two inputs located at the top right of the page ("Rechercher" text field and "OK" button).
In fact, my CSS works on FF & IE but not on Chrome.
To make it more generic, it's just two input in a div.
Can you help me to correct this misbehaviour on Chrome?
Thanks a lot guys!
CSS of the "Rechercher" text field:
#champ_recherche_style {
height:14px;
margin-bottom:15px;
margin-top:15px;
width:150px;
}
CSS of the "OK" button:
#habillage_bouton_texte_recherche_style {
background-color:#8C8C8C;
color:#FFFFFF;
display:inline;
font-family:Verdana;
font-size:11px;
font-weight:bold;
margin:15px 1px 0 10px;
padding:0 3px;
text-decoration:none;
vertical-align:top;
}
CSS of the div:
#encart_recherche_style {
padding-left:746px;
text-align:center;
width:210px;
}
In general, tables are terrible for layout, but if you MUST use them, just put your button in a TD after the input's TD instead of putting the input field in a table by itself and attempting to force the table to display inline.
I highly suggest learning how to use CSS for your layouts in the future.
Again, I don't recommend tables for layout, but...
Instead of:
<table>
<tr>
<td> INPUT IS HERE </td>
</tr>
</table>
BUTTON IS HERE
Try this:
<table>
<tr>
<td> INPUT GOES HERE </td>
<td> BUTTON GOES HERE </td>
</tr>
</table>
Using inline-block instead of inline on your table will get you closer to the behavior you want.
This has been driving me crazy, sadly haha. I can't figure out why I can't make the "X's" in my table align with the bottom of the table... I've tried putting vertical-align in different places in the CSS, but to no avail :(. Also am I using correctly for blank spots in my table?
Here are snips of both my HTML and CSS files...any comments would be greatly appreciated
<html>
<head>
<title>Day4: Table King</title>
<link rel="stylesheet" type="text/css" href="stylesday4.css" />
</head>
<body>
<table id="products">
<tr>
<th><span></th>
<th>Free Version</th>
<th>Lite Version</th>
<th>Full Version</th>
</tr>
<tr>
<td>Advertising</td>
<td id="td">X</td>
<td><span></td>
<td><span></td>
</tr>
<tr class="alt">
<td>Catering Software</td>
<td><span></td>
<td id="td">X</td>
<td id="td">X</td>
</tr>
....
#products
{
border-collapse:collapse;
width:100%;
}
#products th, #products td
{
border:1px solid #0000FF;
background-color:#C0C0C0;
padding:3px 2px 7px 5px;
}
#products th
{
font-size:20px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#0000FF;
padding-top:4px;
padding-bottom:5px;
background-color:green;
}
#products td
{
vertical-align:bottom;
}
#products tr
{
text-align:center;
color:#0000FF;
}
#products tr.alt td
{
color:blue;
background-color:#A7C942;
}
You could use position: relative on your td and table, then move the td to the bottom by using bottom: 0px.
However, I think this website should answer your question a bit more clearly: http://shouldiusetablesforlayout.com
With the HTML and CSS you have provided the vertical aligning seems to be working as I'd expect. I set up a little test on jsfiddle here http://jsfiddle.net/dttMd/ . I put some line breaks in the first row to confirm that the following text was bottom aligning. If this isn't what you are after could you clarify what exactly it is that you need.
As for the empty cells, what you are doing is wrong since <span> elements need to have a closing tag. My personal preference is just to put in a into the cells. I don't think there really is a "right" way though necessarily (though I am happy to be corrected).
that's because you have a 7px bottom padding in the td. You can change it to
padding:3px 2px 0 5px;
and the spacing is gone.
http://jsfiddle.net/6AAvH/2/
Padding can mess with layout and height/width. Get rid of the padding from your td and give it a height instead.
Sometimes line height can make it seem like it's not aligning to the top or bottom. If your font size is less than its container, it might be inheriting the line height. If you set the line height to the font size (or just line-height: 1) and give the td a height, that should do the trick.
<td height="18" valign="bottom" style="font-size:9px; line-height:9px;">TEXT</td>
Your <span> is missing the closing </span>, and you shouldn't be using a span to take up space since it is an inline element. For tables, you shouldn't even need a placeholder, but if you are more comfortable you can use or if you want it to inherit some kind of padding/margin style, you can use that element (<p> </p> or <h3> </h3>).
You can just simply add valign="bottom" in every td and this will make content to be aligned at the bottom and is supported by every browser in the world!
Hope this would help you.
How to achieve it with CSS or HTML?
<table class="banner"><tr><td>If you need many results, then post your task as piecework here. You only need to pay qualified results.
</td>
<td>Make money by doing piecework</td></tr>
<tr><td>POST PIECEWORK FOR FREE<br/></td><td></td></tr></table>
You should use the table-layout property here...
table { table-layout: fixed; }
table td { overflow: hidden; }
Use CSS:
td{overflow:hidden;width:200px;}
In CSS, you can use the width property. This can be done inline or as part of a stylesheet. For some more CSS for tables, check out CSS Styling Tables from w3schools.
td {
width:200px;
}
<td style="width:200px;">
Or, in HTML, check out the colgroup tag, like this:
<colgroup>
<col width="200px" />
</colgroup>
I personally use the colgroup the most.
What about:
table { width:100% }
td { width:20% }
(assuming you have 5 td's per row. If you have three, put width 33%, if you have 2 put 50% and so on.
Set the width (CSS or inline if you wish) to be the same percent value for each column (ideally with a total of 100%). This will allow progressive scaling.
You can use the width property for the td selector. However, possibly you want to discriminate one table over the other. In that case, you can classify your 'equal-width' table like this:
<table class="equal_width_columns">
<tr><td>one</td><td>onetwothree</td></tr>
</table>
<table> <!-- just a regular table -->
<tr><td>one</td><td>onetwothree</td></tr>
</table>
with css like this:
table.equal_width_colums * td { width: 300px; }
Was searching for this myself. But in my case, the table count was not fixed, hence giving exact percentage was not an option. Found another solution at
http://freachable.net/2007/11/02/AutomaticEqualWidthColumnsInHTMLTables.aspx
Give the cells a very small width. The cells will scale up to fill the available width.
table tr td { width:5%; }