fixed height (table) with rows that overflow going on a second column - html

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>
`

Related

How to specify table column width to a fixed size in HTML?

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/

Rowspan upwards

I'm trying to program a javascript timeline, in which you click on the left column revealing something in the right column. I suppose there are easier ways to do this, but the HTML below looks really really neat.
So the usual way rowspan works is that you have a td that you want to extend down a few rows to complete the table.
<tr>
<td>1942</td>
<td rowspan=2>Something happened</td>
</tr>
<tr>
<td>2017</td>
</tr>
However, what if I want to rowspan upwards, so that the below timeline item fills both rows?
<tr>
<td>1942</td>
</tr>
<tr>
<td>2017</td>
<td rowspan=2>Something else happened</td>
</tr>
I know I can just move them all to the top row and rowspan from there, but I really want to have this nice, easy-to-edit format, with dates and rows right next to each other.
(An idea I had was that if you think of rowspan as analogous to css width and height, there might be something analogous to css left and top (like "table-row"?) you could set, other than actually moving the td's to the tr you want. I don't think that exists, though.)
(also, does anyone know if negative rowspan is defined?)
No, rowspan always works “downwards”. HTML 4 does not explicitly say this, but it is definitely implied, and there is no way to change it. HTML5 makes it explicit, in its boringly detailed (but necessary for implementors) Processing model for tables.
I know this is an old question, but I was looking for this myself and this is the first result on google. After a bit of tweaking, I’ve managed to find a solution:
<table>
<thead>
<tr>
<td>Column 1/<td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan=2>A1</td>
<!--This cell must be hidden; otherwise you will see a gap at the top of the second column between the header and body-->
<td style=“padding:0px;” />
</tr>
<tr>
<td rowspan=3>A</td>
</tr>
<tr>
<td>A2</td>
</tr>
<tr>
<td>A3</td>
</tr>
</tbody>
</table>
You might have to experiment a bit if you want to have a hierarchy deeper than 2 columns, but I’m confident it’s possible.

Table representation using css

Consider the scenario like this.
I have Array List of string arrays.
I want to represent them in the image shown below.
currently I have implemented this as Table. But this is not dynamic. Going forward I have to loop twice which seems some what difficult.
<table>
<tr>
<td>Pack1</td>
<td>Ch1</td>
</tr>
<tr>
<td></td>
<td>ch2</td>
</tr>
<tr>
<td>Pack2</td>
<td>val1</td>
</tr>
<tr>
<td></td>
<td>val2</td>
</tr>
</table>
Please let me know any other approach using css styles.
Loop through every pack
Again loop through each pack to get the values.
This will likely be a little bit of a hot-potato as it's not entirely clear what you want exactly though I've posted a bit of a more structured table format that seems to resemble your goal. If you know how to use colspan and rowspan then you can adjust the table (e.g. if you want multiple rows on a single column) though consider how tables are intended and mostly style by default. I've added some CSS and text to help give you an idea of how (X)HTML tables work when you take advantage of things.
As far as looping I think you can apply the idea of "packages" to tbody elements that are like partitions of a table...they're part of the same kind of data though have their own separate groups.
Comment if you need help adjusting this, it's not difficult.
<table summary="Describe your table here." style="border: 1px solid #aaa; border-collapse: collapse; width: 40%;">
<thead style="background-color: #f77;">
<tr><td colspan="3">Table Header</td></tr>
</thead>
<tfoot style="background-color: #f77;">
<tr><td colspan="3">Table Footer</td></tr>
</tfoot>
<tbody>
<tr style="background-color: #fcc;"><th colspan="3">Pack 1 (Tbody Header)</th></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
</tbody>
<tbody>
<tr style="background-color: #fcc;"><th colspan="3">Pack 2 (Tbody Header)</th></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
</tbody>
</table>

Table row span cell span

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>

HTML: Width for a td independent of the upper tr?

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.