So I am creating tables on a page dynamically, and the rows in each table are also dynamic. I want to display them all in one line and make them scroll horizontally if there is an overflow instead of wrapping. I set inline and overflow scroll:
.tableDiv {width:100%; overflow:scroll; display:inline}
but they are still wrapping. Any help on this would be greatly appreciated!
Here is the jsfiddle: http://jsfiddle.net/xAxfr/
http://jsfiddle.net/xAxfr/2/
.tableDiv {
width:100%;
overflow:auto;
white-space:nowrap;
}
.table {
border-collapse:collapse;
border-spacing:0;
display:inline-block;
}
white-space:nowrap; and display:inline-block;
Remove float: left on .table and add white-space: nowrap on .tableDiv.
http://jsfiddle.net/xAxfr/1/
I think that you could use "The Table Method" as described here. If you next the tables in another table instead of a div, you can make the row as wide as you want creating the same effect.
ex.
<table class="tableContainer">
<tr>
<td>
<table class="table">
<tr>
<th colspan="2">
Table One
</th>
</tr>
<tr>
<td>
two
</td>
<td>
three
</td>
</tr>
<tr>
<td>
four
</td>
<td>
five
</td>
</tr>
</table></td>
<td>
<table class="table">
<tr>
<th colspan="2">
Table Two
</th>
</tr>
<tr>
<td>
two
</td>
<td>
three
</td>
</tr>
<tr>
<td>
four
</td>
<td>
five
</td>
</tr>
</table></td>
Related
I have a problem using Bootstrap tables in Angular:
My <td> tags does not fit the corresponding <th> from my tableheader: I am not sure, if it is caused due my calls to the template presenting the <td>:
Here is my code:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Students</th>
<th>Links</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of tests">
<app-preview-container id={{c.id}} name={{c.name}} description={{c.description}} studentCount={{Count[c.id]}}"></app-preview-container>
</tr>
</tbody>
</table>
And thats the component which gets called (<app-preview-container>):
<td>
{{name}}
</td>
<td>
{{description}}
</td>
<td>
{{count}}
</td>
<td>
some buttons
</td>
Does anyone has a tip how I can fix that? I have tried a lot using Bootstrap width-params like w-xx or col-md-x or col-x or using scope="col"/"row". But none of these fixed it.
Tables often look that way when you change <tr> / <td> display property. HTML tables have their own unique display properties display: table-row; and display: table-cell;.
You either have done that or wrapped your <td>s with additional div.
You can inspect your table in the console, and check if <td>s are direct children of <tr> and then set by hand <tr> and <td> display property to table-row and table-cell.
An example of a broken table:
td {
border: 1px solid gray;
}
*[style] {
outline: 2px dashed red;
}
<table>
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
<td>
Column 3
</td>
</tr>
<tr>
<tr style="display: block;">
<td>
Broken
</td>
<td>
Row
</td>
<td>
!
</td>
</tr>
<tr>
<td style="display: inline-block;">
Broken td
</td>
<td>
!
</td>
<td>
!
</td>
</tr>
<tr>
<td>
Correct
</td>
<td>
row
</td>
<td>
!
</td>
</tr>
</table>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 6 years ago.
I want the whole row to change background-color on hover. The HTML is really old and I must leave it as it is. So I need this done purely in CSS. No JavaScript nor JQuery. Once I hover on .GMDataRow td I also need to trigger (change background) on the same element in another td. The order of elements is same in both td's.
Here's the smaller skeleton of code so you understand what im talking about:
<table>
<tr>
<td>code here</td>
<td>code here</td>
</tr>
</table>
Those two tds have identical children elements and the most important, they have same <tr class="GMDataRow">. So I was thinking maybe it can be done with :nth-child(). I need your suggestions
JSFiddle:
And here's the real skeleton:
<table class="GMMainTable" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="GMBodyLeft">
<table>
<tr class="GMDataRow" >
<td>
xxx
</td>
</tr>
<tr class="GMDataRow">
<td>
xxx
</td>
</tr>
</table>
</div>
</td>
<td>
<div class="GMBodyMid">
<table>
<tr class="GMDataRow">
<td>
yyy
</td>
<td>
yyy
</td>
</tr>
<tr class="GMDataRow">
<td>
yyy
</td>
<td>
yyy
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
try this :
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr{
background: #b8d1f3;
}
.hoverTable tr:hover {
background-color: #ffff99;
}
<table class="hoverTable">
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
</table>
I have a table as follows
<table border="1">
<tr>
<td style="display:table-row">
Apple
</td>
<td style="display:table-row">
Banana
</td>
<td style="display:table-row">
Candle
</td>
<td style="display:table-row">
Digital drive
</td>
</tr>
</table>
Output is as follows
I want to change the output to show only the first two columns in the first row and then the last two columns in the second row without changing the structure of the table html but only changing the display property . Is there any css which lets me achive this ?
Try this:
table td {
border: none;
}
table td:nth-child(-n+1),td:nth-last-child(-n+2) {
float: left;
}
JSFiddle link
It will only make first two column and last two column in single row.
You can use css:
display: none;
Initially i would suggest don't change td default behaviour we have specification for each tag follow it. and you can achieve that display using visibility:hidden; or display:none; to the table-row
<table border="1">
<tr>
<td>
Apple
</td>
</tr>
<tr>
<td>
Banana
</td>
</tr>
<tr>
<td>
Candle
</td>
</tr>
<tr>
<td>
Digital drive
</td>
</tr>
</table>
I am using Bootstrap.
I have a table, where some rows needs to be grouped with the rows below them.
That means there should be no border between them.
I am wondering if there is an inherent bootstrap way of doing this, or do I need to
put on each tr style="..no border.."
All I care is for the solution to work on Chrome (and nice to have on FF).
<table>
<tr>
<td>
<label>Stuff</label>
</td>
<td>
<label>sdrfg</label>
</td>
</tr>
<tr class="group">
<td>
<label>Other stuff</label>
</td>
<td>
<label>asdfgh</label>
</td>
</tr>
<tr>
<td>
<label>Other stuff</label>
</td>
<td>
<label>asdfgh</label>
</td>
</tr>
</table>
CSS:
table{
width:100%;
border-collapse:collapse;
}
table td{
border-top:1px solid #000000;
}
table tr.group>td{
border-top:none;
}
I have the following code :
<table>
<tr>
<td>
<!-- Black Box -->
</td>
<td>
<!-- Search Box -->
</td>
</tr>
<tr>
<td rowspan='2'>
<table>
<tr><td class='thead'>Statut</td></tr>
<tr><td><!-- THE TD TO RESIZE --></td></tr>
</table>
</td>
<td>
<table>
<tr><td class='thead'>Annonce</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr><td class='thead'>Message</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
</table>
It renders like this: http://imageshack.us/a/img689/3140/tbi4.png
But I would like the orange cell under "Statut" to fill the whole height of the containing TD. I tried to apply a height property to the table, the TR and the TD, but nothing happens, be it in HTML with height=... or in CSS with style='height: ...
Here's the render I'd like to have: http://imageshack.us/a/img560/3809/dy4w.png
One could argue that tables are not the best choice here, as they should only be used for tabular data, not for layout.
However, if you decide to go with tables, you should not nest them, but work with rowspan to achieve the deisred result. The HTML would look like this:
<table>
<tr>
<td>
<!-- Black Box -->noir</td>
<td>
<!-- Search Box -->cherche</td>
</tr>
<tr>
<td class='titre'>Statut</td>
<td class='titre'>Annonce</td>
</tr>
<tr>
<td rowspan='3'>lorem ipsum statut</td>
<td>lorem ipsum annonce</td>
</tr>
<tr>
<td class='titre'>Message</td>
</tr>
<tr>
<td>lorem ipsum message</td>
</tr>
</table>
This way you do not need to bother with heights in css (which can be a pain).
I set up a small example to demonstrate: http://jsfiddle.net/qJQdj/
Try height:100%; to make it takes the total height.
Employing min-height will do the trick for you here if you are content aware of the table.
CSS
td[rowspan="2"] > table{
min-height:80px;
}
http://jsfiddle.net/LWxK4/
changed code : convert your code to:
<table>
<tr >
<td class='thead' rowspan='2'>Statut</td>
<td class='thead'>Message</td>
</tr>
<tr><td class='thead'>Message</td></tr>
</table>
it will give you what u want for sure
EDIT: this is the concept of using rowspan.now you should use it to build your own webpage.there are few more cells as well in your code.you can do that using nested tables.my answer shows how to use rowspan properly
If you really wanted nested tables...
You can force a nested table/table-cell to have a minimum height as follows:
Add a class .statut-panel to your inner table:
<table class="wrap">
<tr>
<td>Black Box</td>
<td>Search Box</td>
</tr>
<tr>
<td rowspan='2'>
<table class="statut-panel">
<tr>
<td class='thead'>Statut</td>
</tr>
<tr class="full-size">
<td>THE TD TO RESIZE...</td>
</tr>
</table>
</td>
<td>
<table class="annonce-panel">
<tr>
<td class='thead'>Annonce</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class='thead'>Message</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
</table>
and apply the following CSS:
table td {
background-color: lightgray;
vertical-align: top;
}
table.statut-panel {
border: 1px solid blue;
height: 200px;
}
table.statut-panel .full-size td {
border: 1px dotted blue;
height: 100%;
}
Give the inner table .status-panel a fixed height, say 200px. CSS will treat this as a minimum height so you won't get into any overflow issues as the table content expands.
For the table cell that you want to expand, table.statut-panel .full-size td, simply set the height to 100%, and it will expand in height to at least 200px (or whatever is a good minimum height).
See demo at: http://jsfiddle.net/audetwebdesign/7L3Bc/