I am using a table with style table-layout:fixed to solve wrap problems. The table content is dynamic produced with PHP. When the page is rendered, many cells content doens't appear!
The content appear if I pass the mouse up the cell. If I resize the window manually, all the cell content appear!
What I can do? I accept any solution! Can be javascript, CSS, PHP...
Thanks!
Simone
It sounds like you need to style the headers in the first row of the table in order to establish a width for each column.
<table>
<tr>
<th style="width:100px;">Header 1</th>
<th style="width:100px;">Header 2</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
Related
I'm trying to style a ng-table layout, which contains a table in each row. The way this expanding functionality is implemented in angular, looks like this:
<tr ng-if="org.expanded" ng-repeat-end>
<td></td>
<td></td>
</tr>
The issue is more related to CSS.
The problem is that, when clicking on the plus icon next to the ServiceType column the 4 expanded columns aren't aligned with the parent tablecolumn headers i.e. Service Type, Location , Contact details and Last Updated.
How can I set it, that the values look nicely aligned(left)?
Also, I can't align the Last Updated column to the left.
Here is a plunkr sample of the problem:
http://embed.plnkr.co/UlMg7J/preview
http://plnkr.co/edit/UlMg7J?p=preview
For the last column not aligned issue I have replaced the table for phone,website..etc with divs and it started to align to the position you desired. What it was doing was it was creating extra headers (th) tags which is not desired.
Your Code:
<td data-title="'Contact Details'">
<table>
<tr>
<td>Phone:</td>
</tr>
<tr>
<td>Fax:</td>
</tr>
<tr>
<td>Email:</td>
</tr>
<tr>
<td>Website:</td>
</tr>
</table>
</td>
Changed Code:
<td data-title="'Contact Details'">
<div>Phone:</div>
<div>Fax:</div>
<div>Email:</div>
<div>Website:</div>
</td>
I'm trying to customize my bootstrap table. If the table height is larger than a certain height I want the <tbody> to scroll without scrolling the rest of the table. I have tried pretty much everything I can think of but the table wont even change sizes.
Does anyone know what classes I need to modify to fix this? Here's the elements I use in my table:
<div class="table-responsive">
<table class="table table-condensed">
<colgroup>
<col class="col-xs-1"/>
<col class="col-xs-1"/>
</colgroup>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
And here's a jsFiddle.
I ran into a similar problem with Bootstrap 2.3.2. I had to modify my table some, but a pretty good website I found with a complete css solution is here:
http://www.cssbakery.com/2010/12/css-scrolling-tables-with-fixed.html
I basically took the scrollableArea and scrollableContainer css parts on this site, changed a couple class names to match with what I already had, and used this instead of bootstrap. Maybe this can help, maybe not, but definitely a good alternative.
I have a pop up which opens as all label type or editable type based on the condition.
When I open the pop up as editable, the table is set to center and values are properly
aligned. When I open the same in non editable mode, the values are more moved to the left.
I have uploaded both to JSFiddle for analysis. Please help
Pop up with editable condition
http://jsfiddle.net/gr2022s/C9BZJ/
Pop up with non editable condition
http://jsfiddle.net/gr2022s/C9BZJ/1/
I had done a workaround by adding <blockquote> tag to one of the label but the problem seems to be
the label is moved towards right from the others.
The reason is quite simple :
You never define any width for any <td>. So your <table> will scale each column according to the largest td content. And since your <input type="text /> is way larger than the simple text Ad Hoc, the editable table seems more centered...
Try this to test it :
<table border="1" width="300px">
<tr>
<td>content</td>
<td>content</td>
</tr>
</table>
<table border="1" width="300px">
<tr>
<td>a</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
</table>
<table border="1" width="300px">
<tr>
<td>aaaaaaa</td>
<td>aaa</td>
</tr>
</table>
Or see your updated jsFiddle.
I'd like to have a normal table to look like RadGrids, is there an easy way I can use the RadGrid styles (keeping theming in mind)?
Using a tool like Firebug, you can inspect the table generated by RadGrid.
The example shown on this page gives the following results:
<table class="rgMasterTable rgClipCells">
<thead>
<th class="rgHeader" scope="col">header</th>
</thead>
<tbody>
<td class="rgRow">cell</td>
</tbody>
</table>
Adding the classes stated here to your own table should copy the style from the rad grid.
I have been playing with this, and it seems you need to wrap the table in div(s) with certain styles - maybe due to themes? Maybe I'm still missing something, but this is the only way I could get it to work.
<div class="RadGrid RadGrid_Sunset">
<table class="rgMasterTable rgClipCells">
<thead>
<th class="rgHeader" scope="col">header</th>
</thead>
<tbody>
<td class="rgRow">cell</td>
</tbody>
</table>
</div>
TD is a block element,
but displays like inline,say,several TDs within a TR display in the same line,
why?
TD's are actually not technically "block" elements. Have a look at the CSS display property. Cells are technically of type "table-cell" and they are a special case.
There is also another type of display called "inline-block" which can be useful.
Because they are for tabular data.
Because, that's how tables work.
TR = table row. How else would you want it to behave?
If you want a <td> to display as a "block," simply add another <tr> below the current <tr>. This will effectively make the <td> act like a block-level element.
Let's say you have a table like this:
<table>
<tr>
<td>Table cell A</td>
<td>Table cell B</td>
</tr>
</table>
And you want "Table cell B" to act like a "block." You could do this:
<table>
<tr>
<td>Table cell A</td>
</tr>
<tr>
<td>Table cell B</td>
</tr>
</table>
This moves Table cell B below Table cell A.