if i have a table like following, I didn't make it to define a special width for a single element. Is this possible?
For illustration, i've tried it like this:
<table border="1">
<tr>
<td>Bla</td>
<td>_____________________________________________________</td>
<td>Bla2</td>
</tr>
<tr>
<td>Blub</td>
<td style="width: 100px;">Bli</td>
<td>Hello</td>
</tr>
</table>
Is this possible?
Not really, no. The only thing that exists is the colspan and rowspan attributes that can make a cell span across two columns like so:
<table border="1">
<tr>
<td>Bla</td>
<td>_____________________________________________________</td>
<td>Bla2</td>
</tr>
<tr>
<td colspan="2">Blub Bli - I will span across the whole large line!</td>
<td>Hello</td>
</tr>
</table>
but the exact thing that you want - being completely flexible in cell widths - can be achieved only by two separate tables.
Since you have not specified width explicitly, your other TDs will also be as large as the largest one:
<td>_____________________________________________________</td>
Same is the case with table tag because you have not set width for it too.
Related
Probably this is not possible ? I have a table with 3 columns like this
https://jsfiddle.net/ryvL02de/
I would like for rows overflowing the height to go on a second column on the right side instead.
Most likely this is possible with divs though ? Not really set on a table solutions
<tr>
<td>B-111-aaa</td>
<td>08:00</td>
<td>Firstname Lastname</td>
</tr>
<tr>
<td>B-111-aaa</td>
<td>08:15</td>
<td>Firstname Lastname</td>
</tr>
CSS : class - space.{white-space:pre-line}
<tr>
<td class="space">B-111-aaa</td>
<td>08:00</td>
<td>Firstname Lastname</td>
</tr>
<tr>
<td class="space">B-111-aaa</td>
<td>08:15</td>
<td>Firstname Lastname</td>
</tr>
Your question looks like confusing one.
If you are looking for, column data should not display overflowing to next column.
then you can use style property for column as style='min-width:100px' So data automatically displayed in readable format to user under appropriate columns.
More cleaner code can be,
`
<style>
.fixed-width-Column{
min-width:100px;
text-align:left;
}
</style>
`
Your HTML:
`
<tr><th class="fixed-width-Column">NrAuto</th>
<th class="fixed-width-Column">Ora</th>
<th class="fixed-width-Column">Resp</th>
</tr>
`
I have a table just with a couple of rows and columns in it. What I am stuck with is the width of the column whenever the length of the field increases
So, say, just for instance, I have a table as:
<table>
<thead>
<tr>
<th>column1</th>
<th>column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>valuenfkdkfkdsnfndfndnkffdfndsfnndfnksfnfsfsdnsffs</td>
<td>value2</td>
</tr>
</tbody>
</table>
with a value which has field length of 35-50 characters like the one in the first "td" tag, the table goes out of the prescribed webpage area.
I used {word-wrap: break-word;} but there seems to be no effect. Is there a way to cut of the field length to the next line whenever this is the case and set the column width to a fixed size?
You might be looking for CSS property table-layout:fixed
<table class="users" style="table-layout:fixed;">
<tbody>
<tr>
<td>0001</td>
<td>Johnny Five</td>
</tr>
</table>
OR
CSS:
table.users{table-layout:fixed;}
Source: https://css-tricks.com/fixing-tables-long-strings/
http://jsfiddle.net/9p7Mx/1/
I'm sure this has been asked before but I can't find the correct search terms:
If you have an HTML table such as:
<table>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td> </td>
</tr>
</table>
The colspan=3 on the last row will not actually line up correctly because you don't actually have 4 td elements. If you look at my example link, I have two tables, one with two tds with colspan=2 and the last with four actual tds. In the first, the td elements are just mimicking 4 tds with their own colspan=2 and thus I assume the table has no way of knowing exactly how large a single colspan is since there is none. Without knowing the exact with on a single colspan, it appears the table doesn't know what to do.
If I can't change the number of td elements in the table, is it possible to get the same effect? I'd rather not assign a width using CSS, and assigning a width WILL work (tested) but I'd like to see if there is another way.
The markup violates the HTML table model, as http://validator.w3.org tells if you use it in HTML5 mode (“Table column 2 established by element td has no cells beginning in it.”). So you should expect inconsistent and unexpected rendering.
If your table logically has just three columns, make it so. Instead of trying to make some columns wider by using colspan, use CSS to set the widths. The colspan=2 attribute means just that the cell spans two columns. And you cannot validly span a column that does not exist.
Using classes and setting the width for the X% you want.
You must consider some divs instead of a table.
This is an assignment I need help with. I hate tables as is, but this is what it says:
"The first row in each table consists of one table cell which spans two columns that contain the real estate listing name. The second row in each table consists of two table cells."
My code:
<table>
<tr>
<th>
<h3>TEST</h3>
</th>
</tr>
<th rowspan="2"></th>
<td>Something here !</td>
</tr>
</table>
Just wanted to verify if I did this correctly? Here's the full code:
http://jsfiddle.net/4jzUc/
also, it's supposed to look like this: http://screencloud.net/v/aA5Y
You want to span the column, not the row (colspan vs rowspan). I think this is what you are looking for.
<table>
<tr>
<th colspan="2">
Title
</th>
</tr>
<tr>
<td>First cell</td>
</tr>
<tr>
<td>Second cell</td>
</tr>
</table>
No, your markup is not correct. It does not even comply with the HTML table model, as you can see by using http://validator.nu on your document with <!doctype html> slapped at the start. Still less it does do what the assignment calls for.
The assignment as such is very simple: you just a table with two rows and two columns, just so that the first row has only one cell, which spans two columns:
<table>
<tr><td colspan=2>Real estate name
<tr><td>A table cell <td>Another table cell
</table>
You could use th instead of the first td, since it is kind of a header cell, but beware then that this makes its content bold and centered by default (you can override this is in CSS).
As per the “supposed to look like” link, it seems that you are supposed to put an img element only in the first cell of the second row, and the second cell there contains text and a ul element. And a little bit of CSS too. Note that for this output, you will need to align the second row vertically to the top (using the HTML valign attribute or the CSS vertical-align property).
correct code:
<table>
<tr>
<th>
<h3>TEST</h3>
</th>
<th rowspan="2">RowSpan2!</th>
</tr>
<tr>
<td>Something here !</td>
</tr>
<tr>
<td>Something Else !</td>
</tr>
</table>
The DOM looks like this:
<table>
<tr>
<td>a</td>...<td>g</td>
</tr>
<tr>
<td colspan="3">
<table>
...
</table>
</td>
</tr>
<tr>
<td></td>...<td></td>
</tr>
</table>
Any idea why this wouldn't work in IE? I tried setting width:auto on the TD holding the inner table, and table-layout:fixed isn't viable because the tabular data is generated dynamically.
What could be going wrong?
Currently, the table only fills the first column, and it will not span.
Update: EXAMPLE
http://stefankendall.com/files/example.html
Use colSpan, not colspan
The only thing that comes to mind is that you may have to fill the columns with something for them to get rendered in IE.
<td> </td>