Twitter Bootstrap : collapsible table line width with colspan - html

I'm trying to use the collapse functionality in Twitter Bootstrap in order to display an additional line in a table with a single cell taking the whole width of the table... The line is displayed when a button in the above line is clicked.
The problem is : without the collapse functionality, with the colspan attribute, the "extra line" has the good width, but with the functionality in action, the colspan attribute doesn't seem take effect, the line stays of the width of the first cell of the line above.
<table>
<thead>
<tr>
<th></th>
<th>content</th>
<th>content</th>
<th>content</th>
<th>content</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button data-toggle="collapse" data-target="#collapsible">Develop</button>
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr id="collapsible" class="collapse">
<td colspan="5">
Collapsible content
</td>
</tr>
</tbody>
</table>
What is the problem and how to solve it ?

None of the other solutions on this page worked for me, but
I found the answer here: https://stackoverflow.com/a/21939080/2378910
(I don't want to take credit so upvote that one instead!)
It says:
To collapse a table row, you should write extra css for the collapsed
row:
table .collapse.in {
display: table-row !important;
}
It will fix the display issue after the row expanded.

I solved this issue by putting a div in the cell that I want to collapse and attached the class collapsible to it.

Related

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

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

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.

Rowspan not using top row

I don't understand why my column won't span to the top and bottom rows I created. It is supposed to look like the "Today" column is taller on the top and bottom then the other columns.
It's a lot of code, and I wasn't sure what I should cut without deforming it all or adding a new variable (it needs a fluid height).
JSFiddle: http://jsfiddle.net/DaAwesomeP/aU9Le/
Basic HTML Layout:
<table id="weatherForecast">
<tr class="weatherForecast-row-outer">
<td></td>
</tr>
<tr id="weatherForecast-row">
<td id="weatherForecast-DATE" class="weatherForecast-day weatherForecast-day-today" rowspan="3">
<!-- Cell Content for "Today" Here -->
<td id="weatherForecast-DATE" class="weatherForecast-day ">
<!-- Cell Content Here -->
</td>
</tr>
<tr class="weatherForecast-row-outer">
<td></td>
</tr>
</table>
Here is an image that shows what I want:
The table markup violates the HTML table model rules, as the W3C HTML Validator tells you if you use it in HTML5 mode.
Since there are two cells on the second row, the first row should occupy two columns, too, so set colspan=2 on its td element.
And you cannot use rowspan=3, since there aren’t just enough rows in the table to span. Use rowspan=2 instead.
It’s difficult to tell what you actually want (a drawing would have helped), but the following would at least be valid HTML (note that I fixed a problem with duplicate id values too):
<table id="weatherForecast" border>
<tr class="weatherForecast-row-outer">
<td colspan=2></td>
</tr>
<tr id="weatherForecast-row">
<td id="weatherForecast-DATE" class="weatherForecast-day weatherForecast-day-today" rowspan="2">
<!-- Cell Content for "Today" Here -->
<td id="weatherForecast-DATE2" class="weatherForecast-day ">
<!-- Cell Content Here -->
</td>
</tr>
<tr class="weatherForecast-row-outer">
<td></td>
</tr>
I got rid of the all of the rowspan and just gave one cell display: block. I can then adjust the height of that cell specifically without changing the others. I used calc to provide a variable height.

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>