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.
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 want to match the header column width of a table with the column width of a different table using css.
How can I do this?
<div class="datagrid">
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
</table>
<div class="datagrid" style="height: 500px; overflow:auto;">
<table>
<tfoot>
</tfoot>
<tbody>
<tr><td>col1</td><td>col2</td><td>col3</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td></tr>
</tbody>
</table>
</div>
What have you got in between the two tables ?
my initial thought was to create a new table row and use COLSPAN="3", & put whatever text you like.
effectively, the lower cells will match up with the upper cells, & the middle text will not look like its part of the table.
(use various commands / settings to HIDE the table borders - so it doesn't look like part of the table.)
hope that makes sense
In a table all <th> are having class and <td> dont.
Is it possible to apply the styles from those <th> class to all its corresponding <td>'s with plain css and dont need of any script?
Additionally table is dynamic and so columns index may differ. So i cant use nth-child and only way i can navigate it with class.
Here is the Fiddle
Any better ideas for cross-browser?
Update:
table may have n number of columns and not limited to 2 columns
You could handle this using <col>, http://www.quirksmode.org/css/columns.html#background, only other way I see would need to add the classes everywhere or to use JS.
Try this
<table>
<tr>
<th class="a">`Column A`</th>
`<th class="b">`Column B`</th>
</tr>
<tr>
<td class="a">`aaa`</td>
<td class="b">`bbb`</td>
</tr>
<tr>
<td class="a">`ccc`</td>
<td class="b">`ddd`</td>
</tr>
</table>
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 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>