I've googled a bit to find the solution for transforming a multi-cell table into one cell table, using css (media) DYNAMICALLY!. I found a solution which is not good, because it's mixing results.
This is what I am trying to do...
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
RESULT:
One cell table: Jill,Smith,50,Eve,Jackson,94
<table style="width:100%">
<tr>
<td>Jill
Smith
50
Eve
Jackson
94</td>
</tr>
</table>
If the above is what you are trying to do, then you can't. CSS can not alter your HTML code this way.
<table style="width:200px">
<tr style="width:100px; position:absolute">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr style="width:100px; left:100px; position:absolute">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Now this may LOOK like it is one cell, since the two rows are inline thanks to the absolute positioning (display:inline-block doesn't work). I made it simple. You can use percentages, to make it somewhat more flexible, but I really DO NOT RECOMMEND you to go this way.
I think your issue, whatever it may be, should be solved differently, then by merging cells.
Related
In asp.net (vb), I am trying to write the HTML output that I can have a user open up a report in Excel. It's writing my file fine, but when Excel opens the file it is changing the HTML code. The part that it really changes are formulas!
For instance, I am writing out the following (part of the file):
<table>
<tr>
<td>Trial</td><td x:num x:fmla="=SUM(A2:A10)">0</td>
</tr>
</tr></table>
If I open the file in Excel, the cell has a formula of SUM(A13:A21).
Is there something I can do to prevent Excel from changing this when it opens? I want it to have exactly what I write, but it is changing A LOT!
Thanks for any ideas.
This gives me the expected outcome:
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<table>
<tr>
<td>Trial</td><td x:num x:fmla="=SUM($A$2:$A$10)">0</td>
</tr>
</tr>
</table>
</html>
Even without the $ the formula remains as-written: no adjustment.
Excel 2013/Win7
Tim headed me in the right direction, so thanks.
I'm posting what I found was my idiotic error, just to answer the question. No one is going to do what I did, but here it is.
I was doing a "table" tag for everything when I wrote my program, so my HTML looked like this:
<table><tr>
<tr>
<td x:num>11</td>
<td x:num>12</td>
<td x:num>13</td>
<td x:num>14</td>
</tr></table>
<table> <tr>
<td x:num>21</td>
<td x:num>22</td>
<td x:num>23</td>
<td x:num>24</td>
</tr></table>
<table> <tr>
<td x:num>31</td>
<td x:num>32</td>
<td x:num>33</td>
<td x:num>34</td>
</tr></table>
<tr>
<td>Total Weight</td>
<td></td>
<td x:num x:fmla="=SUM(D4:D10)">0</td>
</tr>
</table>
Obviously, that was changing everything. Changed it to one "table" at the top and "/table" at the end to fix it all.
Thanks for the help!
Ed
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 created a Rails 4 sample app. I added the twitter-bootstrap-rails gem and used the installer to set up all the files: rails generate bootstrap:install less. I then created a scaffold and migrated the database and the bootstrap.css showed up like it should of. I then created a model/view/controller by hand with no scaffolding and the bootstrap css is not being used on it. Here is my view:
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tr>
<td>Jason</td>
<td>John</td>
</tr>
<tbody>
</tbody>
</table>
I should have a striped table, but it is not working. Any ideas? Thanks.
IS it a copy paste error or is it your code?
notice that the row is not in the tbody and you only have one row put more then one to see if it is striped
Check in browser if your bootstrap classes are coming you can do this by searching for any bootstrap class in complied css . if it is not there check in application css file in assets folder if bootstrap is included or not ...
also correct your markup ...
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jason</td>
<td>John</td>
</tr>
</tbody>
</table>
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?