I'm using Twitter Bootstrap and I have a pretty annoying problem.
I have a table (call F) with a row and two cells, in the first cell I have another table (called T) and in the second cell some content (called C), see http://jsfiddle.net/mcJvU/.
<table>
<tr><td>
<table class="table table-striped">
<thead>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
</thead>
<tbody>
<tr><td>1</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>2</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>3</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>4</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>5</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>6</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>7</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>8</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>9</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>10</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
</tbody>
</table>
</td>
<td>
some<br/>
big<br/>
enough<br/>
content<br/>
but<br/>
may<br/>
be<br/>
empty
</td>
</tr>
</table>
Here is the big deal: T has to contain a huge number of rows and C doesn't have much content, it may be empty.
I want that that T takes all the avaliable place or, if C is smaller, at least prints 3 rows.
I tried fixedheadertable but it is a fixed size height and it has some bugs.
Edit: by "at least prints 3 rows", I mean that T must have a min height that allows to display at least three rows".
Finally I make it fixed in pure CSS.
Thanks to this: Twitter Bootstrap scrollable table rows and fixed header
Then I have no more print issues.
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
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>
I want to create a div layout which is similiar to the following table result:
<html>
<head>
<title>Basic</title>
<style>
table { border: 1px solid;}
</style>
</head>
<body>
<table style="border: 1px solid;">
<tr>
<td> Asia</td>
<td>
<table>
<tr>
<td>South Asia</td>
</td>
<td><table>
<tr>
<td>Republic</td>
<td><table>
<tr><td>Singapore</td></tr>
<tr><td>India</td></tr>
</table></td>
</tr>
<tr>
<td>Monarchy</td>
<td><table>
<tr><td>Bhutan</td></tr>
<tr><td>Nepal</td></tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td>East Asia</td>
<td><table>
<tr>
<td>Republic</td>
<td><table>
<tr><td>China</td></tr>
<tr><td>South Corea</td></tr>
</table></td>
</tr>
<tr>
<td>Constitutional Monarchy</td>
<td><table>
<tr><td>something</td></tr>
<tr><td>Japan</td></tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
I managed to replicate this with some effort. The problem is that I want the names of the countries to be in a column or if you will - the containers for the government types to be the same width so other containers will align.
If I don't do it in nested containers (in the example - nested tables) the rows will get displaced. Currently rows are shown exactly how I want them - the text is in the vertical middle of the what they refer to.
Only thing that comes up to my mind is to set the text in the same columns as class=column1, class=column2, etc. and then somehow define the width for the column classes. Problem is the data is defined dynamically and I can't say how much pixels or % of the page I can give to a column, I just need it to stretch with the text.
This is my first time I ask about help here so if I am doing it wrong, tell me how do improve my inquiry.
EDIT: I just read it a second time and I noticed my title doesn't match my question.
My second idea to work around this was to have more than one parent to a single div without the parents having a relation between them, is this even possible?
If you're looking for a decent grid framework for your CSS, I highly recommend blueprint. As for not knowing the pixel or % for the column, that will always be a problem. Are you able to 'play it safe' and just give them a large enough box to handle all text possibilities?
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.