I want to make my form to look neat and I want my cells to be different sizes depending on the information in the cell. How do I make a cell width different then the one above it?
OK now i also want to know how to make 1 cell tall and have a lot of small cells to the right of it.
Example:
<html>
<table border="1"><td width="50">some info</td><td width="50">some more info</td>
<tr>
<td width="250">Lots more text and information in this box then the first cell</td><td> other information</td>
I don't want the first cell in the first row to automatically resize to the length of the first cell in the second row.
Example:
|some info|some more info|
|Lots more text and information in this box then the first cell|other information|
or is there at least another way to lay this out that would look clean?
All column in table always have similar width (you can't change it), you can only add one more cell and span some amount of cells in second row.
<html>
<table border="1">
<tr>
<td width="50">some info</td>
<td width="50">some more info</td>
<td></td>
<td></td>
</tr>
<tr>
<td width="250" colspan="3">Lots more text and information in this box then the first cell</td>
<td> other information</td>
Try this -- use DIVs to simulate table rows and columns, and the CSS min-width property to create "cells" that can stretch as needed.
http://jsfiddle.net/HN4YS/1/
html:
<div class="row"><div class="col1">some info</div><div class="col2">some more info</div></div>
<div class="row"><div class="col1">Lots more text and information in this box then the first cell</div><div class="col2">other information</div></div>
css:
.col1, .col2 {
display: inline-block;
min-width: 150px;
border: 1px solid;
padding: 4px;
}
.row {
white-space: nowrap;
}
Related
I have a standard table in which the cells appear left-to-right in the same row, but I'd like to force the third cell to appear on a new line. Is there a CSS tweak that can do this?
<table><tr>
<td class="col-1">One</td>
<td class="col-2">Two</td>
<td class="col-3">Three</td>
<td class="col-4">Four</td>
</tr></table>
This displays as: One Two Three Four
Can I force the third column to display on a new row thus:
One Two
Three Four
Not exactly sure why you wouldn't just make it a new row, but I suppose if you had to use CSS, you could do something like this:
table tr td {
display: block;
width: 50%;
box-sizing: border-box;
float: left;
}
JSFiddle
You can make a new row, by wrapping around your td with a tr as below
<table>
<tr>
<td class="col-1">One</td>
<td class="col-2">Two</td>
</tr>
<tr>
<td class="col-3">Three</td>
<td class="col-4">Four</td>
</tr>
</table>
Hope this helps!
I want to change the size of my table cell to be smaller in height. The first cell has an image of 300px width. I'd like the second cell to have a height of 100px. I've tried html solutions like <td height="10"> but that hasn't worked. What I'm looking to do is have an image on the left and a text block on the right.
<table>
<tr>
<td> <img id="plattOverlook" src="images/Scenic/plattOverlook.jpg"/> </td>
<td style="background: white"> This is an overlook. </td>
</tr>
</table>
In a simple table adjacent table data cells will always be the same height unless you use
rowspan=*
Have a look at this page (about half way down) -
http://www.htmlcodetutorial.com/tables/_TD_COLSPAN.html
You will have to use rowspan for the image.
Other wise I don't think there's any possible solution
Use rowspan.
Check this fiddle:
http://jsfiddle.net/10z7ya28/
td {
width: 100px;
height: 50px;
}
I have a couple table header cells that have wrapped text, which I'm fine with. However, the headers have a background color and it looks awkward having different heights between ones that are single line, and others that are 2 lines (wrapped).
Can I make the headers to be a certain height so the cells containing a single line of text will be the same height as the cells that have 2 lines? I don't want to use no-wrap because I'd like to maintain the table's current width.
When I change the line-height, that makes the spacing increase on the wrapped cells too, so basically the header cells are still different heights.
<table class = "large_headers">
<tr>
<th>Test1</th>
<th>Test2</th>
</tr>
<tr>
<td>abc</td>
<td>def</td>
</tr>
</table>
.large_headers th{
display: table-cell;
}
Your markup is invalid. Try this:
<table class = "large_headers">
<tr>
<th>Test1 foobar foobar</th>
<th>Test2</th>
</tr>
<tr>
<td>abc</td>
<td>def</td>
</tr>
</table>
With this CSS:
.large_headers th{
background-color:red;
width:20px;
}
Fiddle here: http://jsfiddle.net/wLEu8/
ths should belong in a tr like a td.
I would like to have a table that has a percentage width and each column will also have a percentage width. I want to use use css to do overflow:hidden; text-overflow:ellipsis; inside certain columns however it does not seem to be working for me.
Here is what I have:
<table style='width:50%;'>
<thead>
<tr>
<td style='width:15%;'>column 1</td>
<td style='width:15%;'>column 2</td>
<td style='width:70%;'>column 3</td>
</tr>
</thead>
<tbody>
<tr>
<td style='border:1px solid red;'>
<div style='overflow:hidden; text-overflow:ellipsis; white-space:nowrap;'>this is some data 1</div>
</td>
<td style='border:1px solid red;'>
<div style='overflow:hidden; text-overflow:ellipsis; white-space:nowrap;'>this is some data 1</div>
</td>
<td style='border:1px solid red;'>No hiding</td>
</tr>
</tbody>
</table>
As the page gets smaller the third column gets smaller instead of the first two columns show ellipsis and shrinking as I would expect.
Here is a jsfiddle.
table {
table-layout:fixed;
}
This might be what you are looking for.
http://jsfiddle.net/wGznj/2/
More info on 'Table Width Algorithms' part, # http://reference.sitepoint.com/css/tableformatting
"With the fixed table layout algorithm, the widths of columns and of the table are not governed by the contents of the table’s cells."Instead, the width of each column is determined as follows:
Column objects whose width is not auto set the width for that column.
A cell in the first row, whose width is not auto, sets the width of the column it belongs to. If the cell spans more than one column, the width is divided over the columns.
Any remaining columns equally divide the remaining horizontal space, minus any borders or cell spacing."
Currently, I have a table that looks like
<table>
<tr>
<th>Submitted</th>
<th>Title</th>
<th>Revisions</th>
</tr>
<tr>
<td>Nov. 22, 2011, 2:14 a.m.</td>
<td>Hello</td>
<td>2</td>
</tr>
</table>
I need the Title column to be as wide as possible while the other columns are just enough to contain their content. I also need the table to fill its container (100% width).How can this be achieved?
It is probably a quick and dirty hack, but you can simply use the following CSS:
td, th {
white-space: nowrap; /* to prevent splitting content into several lines */
}
th:nth-of-type(2) {
width: 100%;
}
There is no way that cells inside table can exceed its overall width, so it may work.
Alternatively you can use JavaScript to calculate middle column width dynamically or set fixed cells width.